SegmentedButton

排他的な選択肢を提示するセグメントボタン。単一選択モードをサポートします。

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

Import

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

使用例

<SegmentedButton.Root defaultValue={['list']}>
  <SegmentedButton.Item value="list">リスト</SegmentedButton.Item>
  <SegmentedButton.Item value="grid">グリッド</SegmentedButton.Item>
</SegmentedButton.Root>

Props

Prop	型	既定値	説明
`defaultValue / value`	`readonly string[]`	—	選択中の値（ToggleGroup）

補足

単一選択が既定。複数選択は Root に multiple を指定。