m3-baseui

Chip

assist / filter / input / suggestion の 4 バリアント。filter はトグル選択、input は削除可能です。

参考: Material Design 3 公式ガイドライン m3.material.io/components/chips/overview

ライブデモ

Import

import { Chip, ThemeProvider } from '@m3-baseui/react-tailwind';

使用例

<Chip variant="filter" selected={active} onSelectedChange={setActive}>
  フィルター
</Chip>

Props

Prop型既定値説明
variant'assist' | 'filter' | 'input' | 'suggestion''assist'チップ種別
selectedboolean—filter バリアントの選択状態