ak-form 表单

表单模块直接增强原生控件，不改变表单提交、键盘操作与辅助技术语义。使用 ak-field 组织标签与帮助文本，再将样式类挂到对应控件即可。

Text Input / Textarea

PREVIEW / FORM/TEXTText input and textarea

干员代号 用于当前行动编队记录 行动备注

SOURCE / HTML

<div class="ak-form-stack">
  <label class="ak-field">
    <span class="ak-label">干员代号</span>
    <input
      class="ak-input"
      type="text"
      name="callsign"
      placeholder="输入代号"
      aria-describedby="callsign-hint"
    >
    <small id="callsign-hint" class="ak-field__hint">用于当前行动编队记录</small>
  </label>

  <label class="ak-field">
    <span class="ak-label">行动备注</span>
    <textarea
      class="ak-textarea"
      name="notes"
      rows="3"
      placeholder="补充部署策略或风险说明"
    ></textarea>
  </label>
</div>

输入框与多行文本共享边框、聚焦和禁用状态。校验失败时可在控件上添加 aria-invalid="true"，不需要额外 JavaScript。

通过 --ak-field-signal 调整输入控件的聚焦信号色。

Checkbox / Radio / Switch

PREVIEW / FORM/CHOICEChoice controls

携带支援单位 Alpha 编队 Beta 编队 自动部署

SOURCE / HTML

<div class="ak-form-stack">
  <label class="ak-choice ak-choice--checkbox">
    <input class="ak-choice__input" type="checkbox" name="support">
    <span class="ak-choice__label">携带支援单位</span>
  </label>

  <label class="ak-choice ak-choice--radio">
    <input class="ak-choice__input" type="radio" name="squad" value="alpha" checked>
    <span class="ak-choice__label">Alpha 编队</span>
  </label>

  <label class="ak-choice ak-choice--radio">
    <input class="ak-choice__input" type="radio" name="squad" value="beta">
    <span class="ak-choice__label">Beta 编队</span>
  </label>

  <label class="ak-choice ak-choice--switch">
    <input class="ak-choice__input" type="checkbox" name="auto" role="switch">
    <span class="ak-choice__label">自动部署</span>
  </label>
</div>

Checkbox、Radio 与 Switch 都由原生 <input> 提供状态。Switch 仍是 checkbox，只需补充 role="switch" 与 ak-choice--switch。

选择控件可分别通过 --ak-choice-signal 与 --ak-choice-fill 调整边界和选中填充色。

Select

PREVIEW / FORM/SELECTSelect

选择行动 1-7 暴君 4-10 灯火将熄 7-18 爱国者 将读取对应关卡的作战记录

SOURCE / HTML

<label class="ak-field">
  <span class="ak-label">选择行动</span>
  <select class="ak-select" name="operation">
    <option value="1-7">1-7 暴君</option>
    <option value="4-10">4-10 灯火将熄</option>
    <option value="7-18">7-18 爱国者</option>
  </select>
  <small class="ak-field__hint">将读取对应关卡的作战记录</small>
</label>

Select 保留原生选项面板与键盘行为，仅替换闭合状态下的视觉。

Input Number

PREVIEW / FORM/INPUT-NUMBERInput number

SOURCE / HTML

<div class="ak-input-number">
  <button class="ak-input-number__increase" aria-label="增加">
    <svg class="ak-icon" aria-hidden="true"><use href="#icon-add-line"></use></svg>
  </button>
  <button class="ak-input-number__decrease" aria-label="减少">
    <svg class="ak-icon" aria-hidden="true"><use href="#icon-subtract-line"></use></svg>
  </button>
  <button class="ak-input-number__max">最多</button>
  <button class="ak-input-number__min">最少</button>
  <input class="ak-input-number__inner" value="00:00:00" aria-label="时间">
</div>