データ表示
Chip
キーワードや絞り込み条件などを表す小さなタグ。clickable で押して選べるようにしたり、onRemove で削除ボタンを付けたりできます。
ReactVueWeb Components
Storybook で見る プレイグラウンド
使用例
<Chip status="info">React</Chip>
<Chip clickable selected onClick={toggle}>絞り込み</Chip>
<Chip onRemove={() => remove(id)}>ada@example.com</Chip>設定できる項目
| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
status | ChipStatus | neutral | Semantic color. @default 'neutral' |
small | boolean | false | Smaller size. @default false |
selected | boolean | — | Selected/active (e.g. a filter chip). Renders a solid fill + `aria-pressed`. |
clickable | boolean | — | Make the whole chip a toggle button. Ignored when `onRemove` is set. |
onRemove | () => void | — | When provided, renders a trailing remove button that calls this handler. |
removeLabel | string | Remove | Accessible label for the remove button. @default 'Remove' |
children | ReactNode | — |
アクセシビリティ
- 文字と背景の明るさの差をしっかり取り、読みやすくしています。ライトでもダークでも、見やすさの国際基準 WCAG の最高ランク AAA（明るさの差が 7:1 以上）を満たします。
- マウスがなくても、キーボードだけですべての操作ができます。
- いまどこを操作しているかを示す枠（フォーカスの囲み）が、常にはっきり見えます。
- 利用者が「画面の動きを減らす」設定にしているときは、過剰なアニメーションを止めます。
どのコンポーネントも、だれにとっても使いやすいように、見やすさの国際基準 WCAG の最高ランク AAA（WCAG 2.1 AAA）を満たすよう作っています。