---
title: 输入槽 Input
url: https://ui.zhaozimin.com/components/input/
markdown: https://ui.zhaozimin.com/components/input.md
group: 组件
origin: 设计系统源码（src/system），本仓库是唯一源头
source:
  - src/system/styles/v4/controls.css  # https://ui.zhaozimin.com/src/system/styles/v4/controls.css
  - src/system/styles/v4/base.css  # https://ui.zhaozimin.com/src/system/styles/v4/base.css
version: v0.2.0  # 设计系统版本，发布于 2026-09-23
scope: .zzm-v4   # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/v/0.2.0/zzm.css   # 锁版本地址，本仓库再改也不影响你
---

# 输入槽 Input

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

### 样张 · 默认

聚焦：描边变墨 + .07 墨色光晕

React：

```jsx
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',
    }} />
  )
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<input
  class="zzm-input"
  placeholder="输入槽（内凹）"
  aria-label="姓名"
  style="
    width: 280px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    padding: 0 12px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
  "
/>
```

### 样张 · 朱色聚焦

.zzm-input-accent——只给「下一步就靠它」的那一个输入框

React：

```jsx
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',
    }} />
  )
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<input
  class="zzm-input zzm-input-accent"
  placeholder="聚焦时朱色光晕"
  aria-label="邀请码"
  style="
    width: 280px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    padding: 0 12px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
  "
/>
```

### 样张 · 错误态

朱色描边 + 3% 朱底 + 下方一行说明

React：

```jsx
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>
  )
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<div style="display: grid; gap: 8px; width: 280px">
  <input
    placeholder="错误状态"
    aria-label="邮箱"
    aria-invalid="true"
    style="
      height: 36px;
      border-radius: 8px;
      border: 1px solid var(--zzm-accent, #a6402f);
      padding: 0 12px;
      font-size: 12.5px;
      font-family: inherit;
      outline: none;
      background: rgba(166, 64, 47, 0.03);
    "
  />
  <span style="font-size: 12px; line-height: 20px; color: var(--zzm-accent, #a6402f)">
    邮箱格式不对，少了 @
  </span>
</div>
```

### 样张 · 多行

React：

```jsx
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',
    }} />
  )
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<textarea
  class="zzm-input"
  rows="4"
  placeholder="多行输入同样内凹"
  aria-label="备注"
  style="
    width: 360px;
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    padding: 8px 12px;
    font-size: 12.5px;
    line-height: 20px;
    font-family: inherit;
    outline: none;
    resize: vertical;
  "
></textarea>
```

## 质感从哪来

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

## 铁律

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

## 本页用到的 CSS

按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）：

```css
/* tokens.css · 用到的令牌 */
:root {
  --zzm-accent: #A6402F;
}

/* base.css */

.zzm-v4 input.zzm-input:focus, .zzm-v4 textarea.zzm-input:focus { border-color: #161616 !important; }

.zzm-v4 input.zzm-input-accent:focus { border-color: var(--zzm-accent, #A6402F) !important; }

/* controls.css */

.zzm-v4 input.zzm-input,
.zzm-v4 textarea.zzm-input {
  background: #FDFDFC;
  box-shadow:
    inset 0 1.5px 3px rgba(0, 0, 0, .06),
    inset 0 1px 1px rgba(0, 0, 0, .04);
}

.zzm-v4 input.zzm-input:focus,
.zzm-v4 textarea.zzm-input:focus {
  box-shadow:
    inset 0 1.5px 3px rgba(0, 0, 0, .06),
    0 0 0 3px rgba(22, 22, 22, .07);                    /* 聚焦光晕 */
}

.zzm-v4 input.zzm-input-accent:focus {
  box-shadow:
    inset 0 1.5px 3px rgba(0, 0, 0, .06),
    0 0 0 3px rgba(166, 64, 47, .14);
}
```

---

上一页：[视频播放键](https://ui.zhaozimin.com/components/video-play.md) · 下一页：[开关](https://ui.zhaozimin.com/components/switch.md) · 全站目录：https://ui.zhaozimin.com/llms.txt