m3-baseui

Select

複合コンポーネント（Select.Root / Trigger / Value / Icon / Portal / Positioner / Popup / Item）。M3 の outlined トリガーとメニュー popup を提供します。

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

Import

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

使用例

<Select.Root value={fruit} onValueChange={setFruit}>
  <Select.Trigger>
    <Select.Value placeholder="果物を選択" />
    <Select.Icon />
  </Select.Trigger>
  <Select.Portal>
    <Select.Positioner>
      <Select.Popup>
        <Select.Item value="apple">りんご</Select.Item>
        <Select.Item value="orange">みかん</Select.Item>
      </Select.Popup>
    </Select.Positioner>
  </Select.Portal>
</Select.Root>

Props

Prop型既定値説明
value / onValueChangestring—選択値と変更ハンドラ

補足

複合 API の詳細は Base UI Select の part 構成に準拠します。