表单控件

输入框默认 ink-200 描边，focus 时切换为 cdx-700 并叠加 2px 柔和光晕；错误态使用状态红。所有控件高度与圆角保持一致。

返回组件库
04 · FORMS · 表单控件
Input States
Switch · Checkbox · Radio
Select（打开态）
全部科室
呼吸内科
心血管内科
肿瘤科
Tag Input · 标签输入
冠心病 × 高血压 × 
<section id="forms" class="section">
    <div class="section-title">04 · FORMS · 表单控件</div>
    <div class="demo-box grid grid-cols-2 gap-8">
      <div>
        <div class="demo-sub">Input States</div>
        <div class="space-y-3">
          <input class="w-full px-3 py-2 border border-ink-200 rounded text-[13px] focus:outline-none focus:border-cdx-700" placeholder="默认态 · 请输入内容">
          <input class="w-full px-3 py-2 border rounded text-[13px]" style="border-color:#185058;box-shadow:0 0 0 2px rgba(24,80,88,.12)" value="聚焦态">
          <input class="w-full px-3 py-2 border rounded text-[13px]" style="border-color:#DC2626;box-shadow:0 0 0 2px rgba(220,38,38,.08)" value="错误态">
          <input class="w-full px-3 py-2 border border-ink-200 rounded text-[13px] bg-ink-50 text-ink-400" value="禁用态" disabled>
        </div>
      </div>
      <div>
        <div class="demo-sub">Switch · Checkbox · Radio</div>
        <div class="space-y-3">
          <div class="flex gap-6 items-center">
            <label class="switch"><input type="checkbox"><span class="switch-track"><span class="switch-thumb"></span></span><span class="text-[13px] text-ink-900">关闭</span></label>
            <label class="switch"><input type="checkbox" checked><span class="switch-track"><span class="switch-thumb"></span></span><span class="text-[13px] text-ink-900">开启</span></label>
          </div>
          <div class="flex gap-4">
            <label class="checkbox"><input type="checkbox"><span class="checkbox-box"></span><span class="text-[13px]">未选</span></label>
            <label class="checkbox"><input type="checkbox" checked><span class="checkbox-box"></span><span class="text-[13px]">已选</span></label>
          </div>
          <div class="flex gap-4">
            <label class="radio"><input type="radio" name="r1"><span class="radio-dot"></span><span class="text-[13px]">选项一</span></label>
            <label class="radio"><input type="radio" name="r1" checked><span class="radio-dot"></span><span class="text-[13px]">选项二</span></label>
          </div>
          <div class="radio-button-group">
            <button class="radio-button">全部</button>
            <button class="radio-button is-active">进行中</button>
            <button class="radio-button">已完成</button>
          </div>
        </div>
      </div>
      <div>
        <div class="demo-sub">Select（打开态）</div>
        <div class="select is-open" style="margin-bottom:156px">
          <button class="select-trigger"><span>呼吸内科</span><svg class="w-3 h-3 text-ink-400" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 4.5l3 3 3-3"/></svg></button>
          <div class="select-panel">
            <div class="select-option">全部科室</div>
            <div class="select-option is-selected">呼吸内科</div>
            <div class="select-option">心血管内科</div>
            <div class="select-option">肿瘤科</div>
          </div>
        </div>
      </div>
      <div>
        <div class="demo-sub">Tag Input · 标签输入</div>
        <div class="tag-input">
          <span class="tag-input-chip">冠心病 <span class="cursor-pointer opacity-60">×</span></span>
          <span class="tag-input-chip">高血压 <span class="cursor-pointer opacity-60">×</span></span>
          <input class="tag-input-field" placeholder="输入标签回车">
        </div>
      </div>
    </div>
  </section>

安装

在页面中引入组件样式与 Tailwind 配置即可。组件样式只包含组件本身，不包含站点外壳。

<link rel="stylesheet" href="design-system/assets/design-system.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="design-system/tokens/tailwind.config.js"></script>

使用方式

在 Code 标签页复制完整标记，替换其中的文案与数据即可。颜色、字号、圆角与阴影一律引用 tokens/design-tokens.json 中的 token，不要写入未定义的颜色值。

组件在浅色主题下设计；若页面启用暗色模式，请先用 token 覆盖背景与文字色，再复用组件结构。

设计规范

完整的尺寸、状态与反模式说明见 DESIGN.md。开发完成后请按 §28 检查清单逐项核对。