input.md
组件 · COMPONENT

输入槽 Input

键是凸的，槽是凹的。.zzm-input 给输入框一层内凹阴影和近白底色；几何（高 36、圆角 8、.14 描边、内距 12）由调用方写在 style 里。

来源同步自 edu v23.5.1源styles/v4/controls.css源styles/v4/base.css机读components/input.md
默认聚焦：描边变墨 + .07 墨色光晕
export function Basic() {
  return (
    <input className="zzm-input" placeholder="输入槽（内凹）" aria-label="姓名" style={{
      width: 280, height: 36, borderRadius: 8, border: '1px solid rgba(0,0,0,.14)',
      padding: '0 12px', fontSize: 12.5, fontFamily: 'inherit', outline: 'none',
    }} />
  )
}
朱色聚焦.zzm-input-accent——只给「下一步就靠它」的那一个输入框
export function AccentFocus() {
  return (
    <input className="zzm-input zzm-input-accent" placeholder="聚焦时朱色光晕" aria-label="邀请码" style={{
      width: 280, height: 36, borderRadius: 8, border: '1px solid rgba(0,0,0,.14)',
      padding: '0 12px', fontSize: 12.5, fontFamily: 'inherit', outline: 'none',
    }} />
  )
}
错误态朱色描边 + 3% 朱底 + 下方一行说明
邮箱格式不对，少了 @
export function Invalid() {
  return (
    <div style={{ display: 'grid', gap: 8, width: 280 }}>
      <input placeholder="错误状态" aria-label="邮箱" aria-invalid="true" style={{
        height: 36, borderRadius: 8, border: '1px solid var(--zzm-accent, #A6402F)', padding: '0 12px',
        fontSize: 12.5, fontFamily: 'inherit', outline: 'none', background: 'rgba(166,64,47,.03)',
      }} />
      <span style={{ fontSize: 12, lineHeight: '20px', color: 'var(--zzm-accent, #A6402F)' }}>邮箱格式不对，少了 @</span>
    </div>
  )
}
多行
export function Area() {
  return (
    <textarea className="zzm-input" rows={4} placeholder="多行输入同样内凹" aria-label="备注" style={{
      width: 360, maxWidth: '100%', borderRadius: 8, border: '1px solid rgba(0,0,0,.14)',
      padding: '8px 12px', fontSize: 12.5, lineHeight: '20px', fontFamily: 'inherit', outline: 'none', resize: 'vertical',
    }} />
  )
}

质感从哪来

.zzm-input 只负责两件事：底色 #FDFDFC、内凹阴影 inset 0 1.5px 3px rgba(0,0,0,.06)。聚焦时 base.css 把描边改成墨色（带 !important，所以内联描边也会被覆盖）。占位符颜色 #B4B4AF 在 .zzm-v4 作用域里统一设定。

铁律

✓ 要高 36（与 md 按钮同高，放一行能对齐）
✗ 不要输入框做成胶囊
✓ 要错误用朱色描边 + 文字说明怎么改
✗ 不要只变红不说原因