Input
プレースホルダをラベル代わりにしない。入力すると消えて何の欄か分からなくなる。
デモ
Props
| 名前 | 型 | 説明 |
|---|---|---|
| variant | 'solid' | 'outline' | 'soft' | 'ghost' | 'plain' | |
| size | 'sm' | 'md' | 'lg' | |
| radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | |
| label | ReactNode | |
| placeholder | string | |
| description | ReactNode | |
| errorMessage | ReactNode | `isInvalid` のときに表示する。色だけに頼らずテキストを必ず伴う（WCAG 1.4.1） |
| type | 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | |
| name | string | |
| value | string | |
| defaultValue | string | |
| onChange | (value: string) => void | |
| onKeyDown | KeyboardEventHandler<HTMLInputElement> | キー操作。**IME 変換中のキーはここに届かない**（テーマが core の `useImeSafeKeys` を通す）。 変換確定の Enter で送信が暴発する事故を、利用側が意識せずに防げる。 |
| isDisabled | boolean | |
| isReadOnly | boolean | |
| isRequired | boolean | |
| isInvalid | boolean | |
| startContent | ReactNode | |
| endContent | ReactNode | |
| classNames | ClassNames<typeof inputSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- root必須
- label
- inputWrapper必須
- input必須
- startContent
- endContent
- description
- errorMessage
アクセシビリティ
- `label` は必須。`description` と `errorMessage` は `aria-describedby` で関連付く。 IME 変換中の Enter は抑制されるため、変換確定が送信に化けない
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。