Search

M3 検索バー。leading 検索アイコンとクリアボタンを備えた TextField 派生コンポーネントです。

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

Import

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

使用例

<Search.Root items={['りんご', 'みかん', 'ぶどう']}>
  <Search.Bar>
    <Search.Icon>
      <Search.SearchGlyph />
    </Search.Icon>
    <Search.Input placeholder="検索" aria-label="検索" />
    <Search.Clear aria-label="クリア">×</Search.Clear>
  </Search.Bar>
  <Search.Portal>
    <Search.Positioner sideOffset={4}>
      <Search.Popup>
        <Search.Empty>該当なし</Search.Empty>
        <Search.List>
          {(item) => (
            <Search.Item key={item} value={item}>
              {item}
              <Search.ItemIndicator>
                <Search.Check />
              </Search.ItemIndicator>
            </Search.Item>
          )}
        </Search.List>
      </Search.Popup>
    </Search.Positioner>
  </Search.Portal>
</Search.Root>

Props

Prop	型	既定値	説明
`Search.Root items`	`readonly string[]`	—	候補リスト
`value / onValueChange`	`string`	—	選択値と変更ハンドラ