フォーム

Input

1 行のテキスト入力欄。FormField の中で使うと、ラベルや説明との結び付けを自動で受け取ります。

ReactVueWeb Components
Storybook で見る

プレイグラウンド

使用例

<FormField label="Name"><Input /></FormField>
<Input type="email" aria-label="Email" />

設定できる項目

名前 既定値 説明
size 'sm' | 'md' | 'lg' md Control size. @default 'md'

アクセシビリティ

  • 文字と背景の明るさの差をしっかり取り、読みやすくしています。ライトでもダークでも、見やすさの国際基準 WCAG の最高ランク AAA(明るさの差が 7:1 以上)を満たします。
  • マウスがなくても、キーボードだけですべての操作ができます。
  • いまどこを操作しているかを示す枠(フォーカスの囲み)が、常にはっきり見えます。
  • 利用者が「画面の動きを減らす」設定にしているときは、過剰なアニメーションを止めます。

どのコンポーネントも、だれにとっても使いやすいように、見やすさの国際基準 WCAG の最高ランク AAA(WCAG 2.1 AAA)を満たすよう作っています。