UI设计规范及说明

Appearance

Form 表单 ​

*UI备注

此模块为须严格遵守设计规范的模块

用以收集、校验和提交数据，一般由输入框、单选框、复选框、选择器等控件组成。

CSS样式 ​

全部form样式代码：

查看代码
css
/* HnuiIcon */
@import url('./icon.css');

/* 全局css变量 */

:root {
  /* #region vars-BrandColor */

  /* 品牌色 */
  --hnui-brand-color: #1f78ff;
  --hnui-brand-color1: #005ce5;
  --hnui-brand-color2: #4b83f7;
  --hnui-brand-color3: #3384ff;
  --hnui-brand-color4: #599bff;
  --hnui-brand-color5: #80b2ff;
  --hnui-brand-color6: #b2d1ff;
  --hnui-brand-color7: #cce0ff;
  --hnui-brand-color8: #d9e8ff;
  --hnui-brand-color9: #ebf3ff;
  --hnui-brand-color10: #f2f7ff;

  /* 状态颜色 */
  --hnui-brand-color-normal: var(--hnui-brand-color);
  --hnui-brand-color-hover: var(--hnui-brand-color3);
  --hnui-brand-color-active: var(--hnui-brand-color1);
  --hnui-brand-color-elected: var(--hnui-brand-color9);
  --hnui-brand-color-disabled: var(--hnui-brand-color7);

  --hnui-brand-color-disabled-border: var(--hnui-brand-color6);
  --hnui-brand-color-disabled-bg: var(--hnui-brand-color10);

  /* #endregion vars-BrandColor */

  /* #region vars-DomainColor */

  /* 功能色 */
  --hnui-success-color: #2ba471;
  --hnui-success-hover-color: #51bd90;
  --hnui-success-active-color: #2ba471;

  --hnui-warning-color: #faad14;
  --hnui-warning-hover-color: #ffc146;
  --hnui-warning-active-color: #db960b;

  --hnui-danger-color: #ff4d4d;
  --hnui-danger-hover-color: #ff7676;
  --hnui-danger-active-color: #d82a2a;

  --hnui-info-color: #8d97a6;
  --hnui-info-hover-color: #b2b7c0;
  --hnui-info-active-color: #707a89;

  /* #endregion vars-DomainColor */

  /* #region vars-NeutralColor */
  /* 中性色 */

  /* 标题文字 */
  --hnui-neutral-color-1: #2d2e33;

  /* 正文、重要信息文字、按钮文字、输入框正常状态文字等 */
  --hnui-neutral-color-2: #43454d;

  /* 内容文字、说明叙述文字 */
  --hnui-neutral-color-3: #5d606a;

  /* 提示性文字、辅助文本 */
  --hnui-neutral-color-4: #9298a0;

  /* 禁用文本 */
  --hnui-neutral-color-5: #b7bdc7;

  /* 描边格描边、输入文本描边、下拉选择描边等 */
  --hnui-neutral-color-6: #dfe2e7;

  /* 全局背景、禁用状态、分割线等 */
  --hnui-neutral-color-7: #f0f2f5;

  /* 最低颜色等 */
  --hnui-neutral-color-8: #fafbfc;

  /* #endregion vars-NeutralColor */

  /* 默认文字颜色 */
  --hnui-text-color: var(--hnui-neutral-color-2);

  --hnui-info-bg: #eceff4;
  --hnui-info-bg2: #e7e7e7;

  --hnui-color-white: #fff;
  --hnui-color-black: #000;

  --hnui-border-width: 1px;
  --hnui-border-dashed-width: 2px;
  --hnui-border-color: var(--hnui-neutral-color-6);

  --hnui-disabled-bg-color: var(--hnui-neutral-color-7);
  --hnui-disabled-color: var(--hnui-neutral-color-5);

  --hnui-control-height: 32px;
  --hnui-control-height-sm: 24px;
  --hnui-control-height-lg: 40px;

  --hnui-control-transparent: transparent;
}

.dark {
  --hnui-brand-color6: rgb(50, 59, 74);
  --hnui-brand-color7: #30353d;
  --hnui-brand-color8: #42484f;
  --hnui-brand-color9: #4c4f54;
  --hnui-brand-color10: #29292c;

  /* 中性色 */

  /* 标题文字 */
  --hnui-neutral-color-1: #c4c8dc;

  /* 正文、重要信息文字、按钮文字、输入框正常状态文字等 */
  --hnui-neutral-color-2: #b9bed3;

  /* 内容文字、说明叙述文字 */
  --hnui-neutral-color-3: #afb5c7;

  /* 提示性文字、辅助文本 */
  --hnui-neutral-color-4: #6a6f75;

  /* 禁用文本 */
  --hnui-neutral-color-5: #53565b;

  /* 描边格描边、输入文本描边、下拉选择描边等 */
  --hnui-neutral-color-6: #59595a;

  /* 全局背景、禁用状态、分割线等 */
  --hnui-neutral-color-7: #343535;

  /* 最低颜色等 */
  --hnui-neutral-color-8: #151516;

  --hnui-info-bg: #393b3d;

  --hnui-color-white: #000;
  --hnui-color-black: #fff;

  --hnui-control-transparent: transparent;
}

*,
::before,
::after {
  box-sizing: border-box;
}

body {
  color: var(--hnui-neutral-color-2);
}

/* #region vars-FontFamily */
@font-face {
  font-family: 'DIN';
  src: url('/fonts/D-DIN-PRO/D-DIN-PRO.woff2') format('woff2'),
    url('/fonts/D-DIN-PRO/D-DIN-PRO.woff') format('woff'),
    url('/fonts/D-DIN-PRO/D-DIN-PRO.ttf') format('truetype'),
    url('/fonts/D-DIN-PRO/D-DIN-PRO.eot') format('embedded-opentype'),
    url('/fonts/D-DIN-PRO/D-DIN-PRO.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* 使用数字字体 */
.use-font {
  font-family: DIN;
}
/* #endregion vars-FontFamily */

/* #region vars-BoxShadow */
/* 一级投影（默认向下） */
.hnui-box-shadow {
  box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.18);
}
.hnui-box-shadow.hover,
.hnui-box-shadow:hover {
  box-shadow: 0px 6px 16px 6px rgba(31, 120, 255, 0.18);
}

/* 二级投影（默认向下） */
.hnui-box-shadow_l2 {
  box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.12);
}
.hnui-box-shadow_l2.hover,
.hnui-box-shadow_l2:hover {
  box-shadow: 0px 6px 16px 6px rgba(31, 120, 255, 0.12);
}

/* 三级投影（默认向下） */
.hnui-box-shadow_l3 {
  box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.06);
}
.hnui-box-shadow_l3.hover,
.hnui-box-shadow_l3:hover {
  box-shadow: 0px 6px 16px 6px rgba(31, 120, 255, 0.06);
}
/* #endregion vars-BoxShadow */
css

/* === 表单容器 === */
.hnui-form {
  width: 100%;
  font-size: 14px;
  color: var(--hnui-text-color);
}

/* === 表单项 === */
.hnui-form-item {
  display: flex;
  margin-bottom: 24px;
}

.hnui-form-item:last-child {
  margin-bottom: 0;
}

/* === 表单项标签 === */
.hnui-form-item-label {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--hnui-text-color);
  line-height: 32px;
}

/* 必填标识 */
.hnui-form-item-required {
  color: var(--hnui-danger-color);
  margin-right: 4px;
}

/* 帮助提示图标 */
.hnui-form-item-help {
  margin-left: 4px;
  color: var(--hnui-neutral-color-4);
  cursor: pointer;
  font-size: 14px;
}

.hnui-form-item-help:hover {
  color: var(--hnui-text-color);
}

/* === 表单项内容区 === */
.hnui-form-item-content {
  flex: 1;
  position: relative;
}

/* === 表单项说明文字 === */
.hnui-form-item-extra {
  font-size: 12px;
  color: var(--hnui-neutral-color-4);
  line-height: 1.5;
  margin-top: 4px;
}

/* === 表单项错误提示 === */
.hnui-form-item-error {
  font-size: 12px;
  color: var(--hnui-danger-color);
  line-height: 1.5;
  margin-top: 4px;
}

/* === 表单项警告提示 === */
.hnui-form-item-warning {
  font-size: 12px;
  color: var(--hnui-warning-color);
  line-height: 1.5;
  margin-top: 4px;
}

/* === 表单项成功提示 === */
.hnui-form-item-success {
  font-size: 12px;
  color: var(--hnui-success-color);
  line-height: 1.5;
  margin-top: 4px;
}

/* === 表单校验状态 === */
/* 错误状态 */
.hnui-form-item-has-error .hnui-form-item-content input,
.hnui-form-item-has-error .hnui-form-item-content select,
.hnui-form-item-has-error .hnui-form-item-content textarea {
  border-color: var(--hnui-danger-color);
}

.hnui-form-item-has-error .hnui-form-item-content input:focus,
.hnui-form-item-has-error .hnui-form-item-content select:focus,
.hnui-form-item-has-error .hnui-form-item-content textarea:focus {
  border-color: var(--hnui-danger-color);
}

/* 警告状态 */
.hnui-form-item-has-warning .hnui-form-item-content input,
.hnui-form-item-has-warning .hnui-form-item-content select,
.hnui-form-item-has-warning .hnui-form-item-content textarea {
  border-color: var(--hnui-warning-color);
}

.hnui-form-item-has-warning .hnui-form-item-content input:focus,
.hnui-form-item-has-warning .hnui-form-item-content select:focus,
.hnui-form-item-has-warning .hnui-form-item-content textarea:focus {
  border-color: var(--hnui-warning-color);
}

/* 成功状态 */
.hnui-form-item-has-success .hnui-form-item-content input,
.hnui-form-item-has-success .hnui-form-item-content select,
.hnui-form-item-has-success .hnui-form-item-content textarea {
  border-color: var(--hnui-success-color);
}

.hnui-form-item-has-success .hnui-form-item-content input:focus,
.hnui-form-item-has-success .hnui-form-item-content select:focus,
.hnui-form-item-has-success .hnui-form-item-content textarea:focus {
  border-color: var(--hnui-success-color);
}

/* === 状态图标 === */
.hnui-form-item-status-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  pointer-events: none;
}

.hnui-form-item-status-icon-success {
  color: var(--hnui-success-color);
}

.hnui-form-item-status-icon-error {
  color: var(--hnui-danger-color);
}

.hnui-form-item-status-icon-warning {
  color: var(--hnui-warning-color);
}

/* === 布局方式 === */

/* 右对齐（默认，常规） */
.hnui-form-label-right .hnui-form-item-label {
  width: 100px;
  text-align: right;
  padding-right: 16px;
  justify-content: flex-end;
}

/* 左对齐 */
.hnui-form-label-left .hnui-form-item-label {
  width: 100px;
  text-align: left;
  padding-right: 16px;
  justify-content: flex-start;
}

/* 顶部对齐 */
.hnui-form-label-top .hnui-form-item {
  flex-direction: column;
}

.hnui-form-label-top .hnui-form-item-label {
  width: 100%;
  margin-bottom: 8px;
  line-height: 1.5;
}

/* 纵向布局 */
.hnui-form-layout-vertical .hnui-form-item {
  flex-direction: column;
}

.hnui-form-layout-vertical .hnui-form-item-label {
  width: 100%;
  text-align: left;
  padding-right: 0;
  margin-bottom: 8px;
  line-height: 1.5;
}

/* 行内布局 */
.hnui-form-layout-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hnui-form-layout-inline .hnui-form-item {
  margin-bottom: 0;
  flex: 0 0 auto;
}

.hnui-form-layout-inline .hnui-form-item-label {
  width: auto;
  padding-right: 8px;
}

.hnui-form-layout-inline .hnui-form-item-content {
  flex: 0 0 auto;
  width: auto;
}

/* === 表单操作按钮 === */
.hnui-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}

.hnui-form-label-right .hnui-form-actions {
  padding-left: 116px;
}

.hnui-form-label-left .hnui-form-actions {
  padding-left: 116px;
}

/* === 动态表单项 === */
.hnui-form-item-dynamic {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.hnui-form-item-dynamic-content {
  flex: 1;
}

.hnui-form-item-dynamic-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px dashed var(--hnui-border-color);
  border-radius: 3px;
  background-color: transparent;
  color: var(--hnui-neutral-color-4);
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.hnui-form-item-dynamic-action:hover {
  border-color: var(--hnui-brand-color-hover);
  color: var(--hnui-brand-color-hover);
}

.hnui-form-item-dynamic-action-add {
  border-style: dashed;
}

.hnui-form-item-dynamic-action-remove {
  border-style: dashed;
}

/* === 表单特殊控件包装器 === */
/* 多选选择器包装器 */
.hnui-form-multi-select-wrapper {
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--hnui-border-color);
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background-color: transparent;
}

.hnui-form-multi-select-icon {
  color: var(--hnui-neutral-color-4);
  margin-left: auto;
}

/* 单选按钮组包装器 */
.hnui-form-radio-group-wrapper {
  display: flex;
  gap: 32px;
  padding: 8px 12px;
  background-color: var(--hnui-neutral-color-7);
  border-radius: 3px;
}

.hnui-form-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 多选框组包装器 */
.hnui-form-checkbox-group {
  display: flex;
  gap: 16px;
}

.hnui-form-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 滑块包装器 */
.hnui-form-slider-wrapper {
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--hnui-border-color);
  border-radius: 3px;
  background-color: transparent;
}

.hnui-form-slider-wrapper input[type="range"] {
  flex: 1;
}

/* 范围滑块 */
.hnui-form-range-slider {
  position: relative;
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--hnui-border-color);
  border-radius: 3px;
  background-color: transparent;
}

.hnui-form-range-slider-track {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: var(--hnui-neutral-color-6);
  border-radius: 2px;
}

.hnui-form-range-slider-range {
  position: absolute;
  height: 4px;
  background-color: var(--hnui-brand-color);
  border-radius: 2px;
}

.hnui-form-range-slider-handle {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: var(--hnui-color-white);
  border: 2px solid var(--hnui-brand-color);
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.2s;
}

.hnui-form-range-slider-handle:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* 带图标的输入框包装器 */
.hnui-form-input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.hnui-form-input-icon-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hnui-neutral-color-4);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hnui-form-input-icon-suffix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hnui-neutral-color-4);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG 图标支持 */
.hnui-form-input-icon-prefix svg,
.hnui-form-input-icon-suffix svg {
  width: 16px;
  height: 16px;
}

.hnui-form-input-with-prefix {
  padding-left: 36px !important;
}

.hnui-form-input-with-suffix {
  padding-right: 36px !important;
  flex: 1;
}

.hnui-form-input-lg {
  height: 40px;
}

.hnui-form-actions-spaced {
  margin-top: 16px;
}

/* === 帮助提示气泡 === */
.hnui-form-tip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  cursor: pointer;
}

.hnui-form-tooltip {
  position: absolute;
  z-index: 1000;
  padding: 8px 12px;
  background-color: var(--hnui-neutral-color-1);
  color: var(--hnui-color-white);
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.5;
  max-width: 250px;
  word-wrap: break-word;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.hnui-form-tip-wrapper:hover .hnui-form-tooltip {
  opacity: 1;
  visibility: visible;
}

.hnui-form-tip-wrapper-hover .hnui-form-tooltip {
  opacity: 1;
  visibility: visible;
}

.hnui-form-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--hnui-neutral-color-1);
}

组件对齐和布局方式 ​

Form 表单支持多种对齐和布局方式，包括右对齐（常规）、左对齐、顶部对齐、纵向布局和行内布局。

查看代码
html
<form class="hnui-form hnui-form-label-right" style="max-width: 600px">
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">
      <span class="hnui-form-item-required">*</span>
      名称
    </label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 100%"
      />
    </div>
  </div>
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">
      <span class="hnui-form-item-required">*</span>
      输入框
    </label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 100%"
      />
    </div>
  </div>
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">
      <span class="hnui-form-item-required">*</span>
      选择器
    </label>
    <div class="hnui-form-item-content">
      <div class="hnui-select" style="width: 100%">
        <div class="hnui-select-selector">
          <span
            class="hnui-select-selection-text hnui-select-selection-placeholder"
            >请选择内容</span
          >
          <span class="hnui-select-arrow">
            <i class="hnui-icon-chevron-down"></i>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div class="hnui-form-actions">
    <button class="hnui-btn hnui-btn-primary">确定</button>
    <button class="hnui-btn">取消</button>
  </div>
</form>
html
<form class="hnui-form hnui-form-label-left" style="max-width: 600px">
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">
      名称
      <span class="hnui-form-item-required">*</span>
    </label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 100%"
      />
    </div>
  </div>
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">
      输入框
      <span class="hnui-form-item-required">*</span>
    </label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 100%"
      />
    </div>
  </div>
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">
      输入框
      <span class="hnui-form-item-required">*</span>
    </label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 100%"
      />
    </div>
  </div>
  <div class="hnui-form-actions">
    <button class="hnui-btn hnui-btn-primary">确定</button>
    <button class="hnui-btn">取消</button>
  </div>
</form>
html
<form class="hnui-form hnui-form-label-top" style="max-width: 600px">
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">
      名称
      <span class="hnui-form-item-required">*</span>
    </label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 100%"
      />
    </div>
  </div>
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">
      输入框
      <span class="hnui-form-item-required">*</span>
    </label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 100%"
      />
    </div>
  </div>
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">
      输入框
      <span class="hnui-form-item-required">*</span>
    </label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 100%"
      />
    </div>
  </div>
  <div class="hnui-form-actions">
    <button class="hnui-btn hnui-btn-primary">确定</button>
    <button class="hnui-btn">取消</button>
  </div>
</form>
html

<form class="hnui-form hnui-form-layout-vertical" style="max-width: 600px">
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">输入框</label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 100%"
      />
    </div>
  </div>
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">输入框</label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 100%"
      />
    </div>
  </div>
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">选择器</label>
    <div class="hnui-form-item-content">
      <div class="hnui-select" style="width: 200px">
        <div class="hnui-select-selector">
          <span
            class="hnui-select-selection-text hnui-select-selection-placeholder"
            >请选择内容</span
          >
          <span class="hnui-select-arrow">
            <i class="hnui-icon-chevron-down"></i>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div class="hnui-form-actions">
    <button class="hnui-btn hnui-btn-primary">确定</button>
    <button class="hnui-btn">取消</button>
  </div>
</form>
html

<form class="hnui-form hnui-form-layout-inline">
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">输入框</label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 200px"
      />
    </div>
  </div>
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">选择器</label>
    <div class="hnui-form-item-content">
      <div class="hnui-select" style="width: 200px">
        <div class="hnui-select-selector">
          <span
            class="hnui-select-selection-text hnui-select-selection-placeholder"
            >请选择内容</span
          >
          <span class="hnui-select-arrow">
            <i class="hnui-icon-chevron-down"></i>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">输入框</label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 200px"
      />
    </div>
  </div>
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">选择器</label>
    <div class="hnui-form-item-content">
      <div class="hnui-select" style="width: 200px">
        <div class="hnui-select-selector">
          <span
            class="hnui-select-selection-text hnui-select-selection-placeholder"
            >请选择内容</span
          >
          <span class="hnui-select-arrow">
            <i class="hnui-icon-chevron-down"></i>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div class="hnui-form-actions">
    <button class="hnui-btn hnui-btn-primary">确定</button>
    <button class="hnui-btn">取消</button>
  </div>
</form>

基础表单 ​

包含各种表单控件的基础示例，展示输入框、选择器、单选按钮、多选框、滑块、开关、多行文本等控件的组合使用。

查看代码
html
<form class="hnui-form hnui-form-layout-vertical" style="max-width: 600px">
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">输入框</label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 100%"
      />
    </div>
  </div>

  <div class="hnui-form-item">
    <label class="hnui-form-item-label">单选选择器</label>
    <div class="hnui-form-item-content">
      <div class="hnui-select" style="width: 100%">
        <div class="hnui-select-selector">
          <span class="hnui-select-selection-text">已选择内容</span>
          <span class="hnui-select-arrow">
            <i class="hnui-icon-chevron-down"></i>
          </span>
        </div>
      </div>
    </div>
  </div>

  <div class="hnui-form-item">
    <label class="hnui-form-item-label">多选选择器</label>
    <div class="hnui-form-item-content">
      <div class="hnui-form-multi-select-wrapper" style="width: 100%">
        <div class="hnui-tag hnui-tag-default">
          默认标签
          <button class="hnui-tag-close">×</button>
        </div>
        <div class="hnui-tag hnui-tag-default">
          默认标签
          <button class="hnui-tag-close">×</button>
        </div>
        <div class="hnui-tag hnui-tag-default">
          默认标签
          <button class="hnui-tag-close">×</button>
        </div>
        <span class="hnui-select-arrow">
          <i class="hnui-icon-chevron-down"></i>
        </span>
      </div>
    </div>
  </div>

  <div class="hnui-form-item">
    <label class="hnui-form-item-label">单选按钮</label>
    <div class="hnui-form-item-content">
      <div class="hnui-radio-group">
        <input
          class="hnui-radio-input"
          type="radio"
          name="radio1"
          value="1"
          id="radio_form_1"
        />
        <label class="hnui-radio-label" for="radio_form_1">选项一</label>

        <input
          class="hnui-radio-input"
          type="radio"
          name="radio1"
          value="2"
          id="radio_form_2"
          checked
        />
        <label class="hnui-radio-label" for="radio_form_2">选项二</label>

        <input
          class="hnui-radio-input"
          type="radio"
          name="radio1"
          value="3"
          id="radio_form_3"
        />
        <label class="hnui-radio-label" for="radio_form_3">选项三</label>

        <input
          class="hnui-radio-input"
          type="radio"
          name="radio1"
          value="4"
          id="radio_form_4"
        />
        <label class="hnui-radio-label" for="radio_form_4">选项四</label>
        <input
          class="hnui-radio-input"
          type="radio"
          name="radio1"
          value="5"
          id="radio_form_5"
        />
        <label class="hnui-radio-label" for="radio_form_5">选项五</label>
      </div>
    </div>
  </div>

  <div class="hnui-form-item">
    <label class="hnui-form-item-label">多选框</label>
    <div class="hnui-form-item-content">
      <div class="hnui-form-checkbox-group">
        <label class="hnui-form-checkbox-label">
          <input type="checkbox" class="hnui-checkbox-input" checked />
          <span>多选项</span>
        </label>
        <label class="hnui-form-checkbox-label">
          <input type="checkbox" class="hnui-checkbox-input" />
          <span>多选项</span>
        </label>
        <label class="hnui-form-checkbox-label">
          <input type="checkbox" class="hnui-checkbox-input" />
          <span>多选项</span>
        </label>
      </div>
    </div>
  </div>

  <div class="hnui-form-item">
    <label class="hnui-form-item-label">单选框</label>
    <div class="hnui-form-item-content">
      <div class="hnui-form-range-slider" style="width: 100%">
        <div class="hnui-form-range-slider-track">
          <div
            class="hnui-form-range-slider-range"
            style="left: 20%; width: 40%"
          ></div>
          <div class="hnui-form-range-slider-handle" style="left: 20%"></div>
          <div class="hnui-form-range-slider-handle" style="left: 60%"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="hnui-form-item">
    <label class="hnui-form-item-label">开关</label>
    <div class="hnui-form-item-content">
      <label class="hnui-switch">
        <input type="checkbox" checked />
        <span class="hnui-switch-slider"></span>
      </label>
    </div>
  </div>

  <div class="hnui-form-item">
    <label class="hnui-form-item-label">多行文本</label>
    <div class="hnui-form-item-content">
      <textarea
        class="hnui-textarea"
        placeholder="请输入内容"
        rows="4"
        style="width: 100%"
      ></textarea>
    </div>
  </div>

  <div class="hnui-form-actions">
    <button class="hnui-btn hnui-btn-primary">确定</button>
    <button class="hnui-btn">取消</button>
  </div>
</form>

登录表单 ​

简洁的登录界面示例，带图标的输入框和密码框。

查看代码
html
<form class="hnui-form hnui-form-layout-vertical" style="max-width: 400px">
  <div class="hnui-form-item">
    <div class="hnui-form-item-content">
      <div class="hnui-form-input-with-icon">
        <span class="hnui-form-input-icon-prefix">
          <IconUser />
        </span>
        <input
          type="text"
          class="hnui-input hnui-form-input-lg hnui-form-input-with-prefix"
          placeholder="请输入内容"
          style="width: 100%"
        />
      </div>
    </div>
  </div>

  <div class="hnui-form-item">
    <div class="hnui-form-item-content">
      <div class="hnui-form-input-with-icon">
        <span class="hnui-form-input-icon-prefix">
          <IconLock />
        </span>
        <input
          type="password"
          class="hnui-input hnui-form-input-lg hnui-form-input-with-prefix hnui-form-input-with-suffix"
          placeholder="请输入密码"
          style="width: 100%"
        />
        <span class="hnui-form-input-icon-suffix">
          <IconBrowseOff />
        </span>
      </div>
    </div>
  </div>

  <div class="hnui-form-actions hnui-form-actions-spaced">
    <button class="hnui-btn hnui-btn-primary" style="width: 100%">
      登录
    </button>
  </div>
</form>

无控制按钮 ​

左对齐布局的表单，不包含提交按钮。

查看代码
html
<form class="hnui-form hnui-form-label-left" style="max-width: 600px">
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">输入框</label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 100%"
      />
    </div>
  </div>

  <div class="hnui-form-item">
    <label class="hnui-form-item-label">输入框</label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 100%"
      />
    </div>
  </div>

  <div class="hnui-form-item">
    <label class="hnui-form-item-label">选择器</label>
    <div class="hnui-form-item-content">
      <div class="hnui-select" style="width: 100%">
        <div class="hnui-select-selector">
          <span class="hnui-select-selection-text hnui-select-selection-placeholder">请选择内容</span>
          <span class="hnui-select-arrow">
            <i class="hnui-icon-chevron-down"></i>
          </span>
        </div>
      </div>
    </div>
  </div>
</form>

必填标识 ​

标识必填项的表单示例，通过红色星号标识必填字段。

查看代码
html
<form class="hnui-form hnui-form-label-left" style="max-width: 600px">
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">
      <span class="hnui-form-item-required">*</span>
      输入框
    </label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 100%"
      />
    </div>
  </div>

  <div class="hnui-form-item">
    <label class="hnui-form-item-label">
      <span class="hnui-form-item-required">*</span>
      输入框
    </label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 100%"
      />
    </div>
  </div>

  <div class="hnui-form-item">
    <label class="hnui-form-item-label">
      <span class="hnui-form-item-required">*</span>
      选择器
    </label>
    <div class="hnui-form-item-content">
      <div class="hnui-select" style="width: 100%">
        <div class="hnui-select-selector">
          <span class="hnui-select-selection-text hnui-select-selection-placeholder"
            >请选择内容</span
          >
          <span class="hnui-select-arrow">
            <i class="hnui-icon-chevron-down"></i>
          </span>
        </div>
      </div>
    </div>
  </div>
</form>

提示内容 ​

带帮助提示的表单项，点击帮助图标可显示提示信息。

查看代码
html
<form class="hnui-form hnui-form-label-right" style="max-width: 600px">
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">
      <span class="hnui-form-item-required">*</span>
      输入框
      <span class="hnui-form-tip-wrapper">
        <i class="hnui-icon hnui-icon-tip"></i>
        <span class="hnui-form-tooltip">文字提示文字提示文字提示</span>
      </span>
    </label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 100%"
      />
    </div>
  </div>

  <div class="hnui-form-item">
    <label class="hnui-form-item-label">
      <span class="hnui-form-item-required">*</span>
      输入框
      <span class="hnui-form-tip-wrapper">
        <i class="hnui-icon hnui-icon-tip"></i>
        <span class="hnui-form-tooltip">文字提示文字提示文字提示</span>
      </span>
    </label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 100%"
      />
    </div>
  </div>

  <div class="hnui-form-item">
    <label class="hnui-form-item-label">
      <span class="hnui-form-item-required">*</span>
      选择器
      <span class="hnui-form-tip-wrapper hnui-form-tip-wrapper-hover">
        <i class="hnui-icon hnui-icon-tip"></i>
        <span class="hnui-form-tooltip">文字提示文字提示文字提示</span>
      </span>
    </label>
    <div class="hnui-form-item-content">
      <div class="hnui-select" style="width: 100%">
        <div class="hnui-select-selector">
          <span class="hnui-select-selection-text hnui-select-selection-placeholder"
            >请选择内容</span
          >
          <span class="hnui-select-arrow">
            <i class="hnui-icon-chevron-down"></i>
          </span>
        </div>
      </div>
    </div>
  </div>
</form>

表单校验状态 ​

表单支持多种校验状态，包括说明文案、失败、警告、成功等，可选择是否显示状态图标。

查看代码
html
<form class="hnui-form hnui-form-label-right" style="max-width: 600px">
  <!-- 说明文案 -->
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">
      <span class="hnui-form-item-required">*</span>
      说明文案
    </label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 100%"
      />
      <div class="hnui-form-item-extra">额外提示语，文字过多时输入框宽度折行</div>
    </div>
  </div>

  <!-- 失败 -->
  <div class="hnui-form-item hnui-form-item-has-error">
    <label class="hnui-form-item-label">
      <span class="hnui-form-item-required">*</span>
      失败
    </label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 100%"
      />
      <div class="hnui-form-item-error">额外提示语，文字过多时输入框宽度折行</div>
    </div>
  </div>

  <!-- 警告 -->
  <div class="hnui-form-item hnui-form-item-has-warning">
    <label class="hnui-form-item-label">
      <span class="hnui-form-item-required">*</span>
      警告
    </label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 100%"
      />
      <div class="hnui-form-item-warning">额外提示语，文字过多时输入框宽度折行</div>
    </div>
  </div>

  <!-- 成功 -->
  <div class="hnui-form-item hnui-form-item-has-success">
    <label class="hnui-form-item-label">
      <span class="hnui-form-item-required">*</span>
      成功
    </label>
    <div class="hnui-form-item-content">
      <input
        type="text"
        class="hnui-input"
        placeholder="请输入内容"
        style="width: 100%"
      />
      <div class="hnui-form-item-success">额外提示语，文字过多时输入框宽度折行</div>
    </div>
  </div>

  <!-- 成功带图标 -->
  <div class="hnui-form-item hnui-form-item-has-success">
    <label class="hnui-form-item-label">
      <span class="hnui-form-item-required">*</span>
      成功带图标
    </label>
    <div class="hnui-form-item-content">
      <div class="hnui-form-input-with-icon">
        <input
          type="text"
          class="hnui-input hnui-form-input-with-suffix"
          placeholder="请输入内容"
          style="width: 100%"
        />
        <!-- 完成_实心 -->
        <i class="hnui-icon hnui-icon-check-circle-filled hnui-form-item-status-icon hnui-form-item-status-icon-success"></i>
      </div>
    </div>
  </div>

  <!-- 失败带图标 -->
  <div class="hnui-form-item hnui-form-item-has-error">
    <label class="hnui-form-item-label">
      <span class="hnui-form-item-required">*</span>
      失败带图标
    </label>
    <div class="hnui-form-item-content">
      <div class="hnui-form-input-with-icon">
        <input
          type="text"
          class="hnui-input hnui-form-input-with-suffix"
          placeholder="请输入内容"
          style="width: 100%"
        />
        <!-- 关闭 -->
        <IconErrorCircleFilled class="hnui-icon hnui-form-item-status-icon hnui-form-item-status-icon-error"></IconErrorCircleFilled>
      </div>
    </div>
  </div>

  <!-- 警告带图标 -->
  <div class="hnui-form-item hnui-form-item-has-warning">
    <label class="hnui-form-item-label">
      <span class="hnui-form-item-required">*</span>
      警告带图标
    </label>
    <div class="hnui-form-item-content">
      <div class="hnui-form-input-with-icon">
        <input
          type="text"
          class="hnui-input hnui-form-input-with-suffix"
          placeholder="请输入内容"
          style="width: 100%"
        />
        <IconWarningCircleFilled class="hnui-icon hnui-form-item-status-icon hnui-form-item-status-icon-warning"></IconWarningCircleFilled>
      </div>
    </div>
  </div>
</form>

动态增减表单 ​

支持动态添加和删除表单项，适用于需要灵活数量输入的场景。

查看代码
html
<form class="hnui-form hnui-form-label-right" style="max-width: 700px">
  <div class="hnui-form-item">
    <label class="hnui-form-item-label">
      <span class="hnui-form-item-required">*</span>
      输入框
    </label>
    <div class="hnui-form-item-content">
      <div class="hnui-form-item-dynamic">
        <div class="hnui-form-item-dynamic-content">
          <input
            type="text"
            class="hnui-input"
            placeholder="请输入内容"
            style="width: 100%"
          />
        </div>
        <button
          type="button"
          class="hnui-form-item-dynamic-action hnui-form-item-dynamic-action-remove"
        >
          <IconMinus></IconMinus>
        </button>
      </div>
    </div>
  </div>

  <div class="hnui-form-item">
    <label class="hnui-form-item-label">
      <span class="hnui-form-item-required">*</span>
      输入框
    </label>
    <div class="hnui-form-item-content">
      <div class="hnui-form-item-dynamic">
        <div class="hnui-form-item-dynamic-content">
          <input
            type="text"
            class="hnui-input"
            placeholder="请输入内容"
            style="width: 100%"
          />
        </div>
        <button
          type="button"
          class="hnui-form-item-dynamic-action hnui-form-item-dynamic-action-remove"
        >
          <IconMinus></IconMinus>
        </button>
      </div>
    </div>
  </div>

  <div class="hnui-form-item">
    <label class="hnui-form-item-label">
      <span class="hnui-form-item-required">*</span>
      输入框
    </label>
    <div class="hnui-form-item-content">
      <div class="hnui-form-item-dynamic">
        <div class="hnui-form-item-dynamic-content">
          <input
            type="text"
            class="hnui-input"
            placeholder="请输入内容"
            style="width: 100%"
          />
        </div>
        <button
          type="button"
          class="hnui-form-item-dynamic-action hnui-form-item-dynamic-action-add"
        >
          <i class="hnui-icon hnui-icon-plus"></i>
        </button>
      </div>
    </div>
  </div>
</form>

统一UI

Copyright © 2024