概要

はじめに

スタイリング

レイアウト

リリース

テーマ

（テーマ以下のナビゲーション項目は、英語のままでも理解しやすいので、変更なし。必要であれば、個別に翻訳可能です。）

レイアウト

（レイアウト以下のナビゲーション項目も、英語のままでも理解しやすいので、変更なし。）

タイポグラフィ

（タイポグラフィ以下のナビゲーション項目も、英語のままでも理解しやすいので、変更なし。）

コンポーネント

（コンポーネント以下のナビゲーション項目は、Alert Dialogを「アラートダイアログ」のようにカタカナ語で表現することもできますが、英語のままでも技術者には理解しやすいので、変更なし。必要であれば個別に翻訳可能です。）

ユーティリティ

（ユーティリティ以下のナビゲーション項目も、英語のままでも理解しやすいので、変更なし。）

選択

ボタンでトリガーされる、ユーザーが選択できるオプションのリストを表示します。

ソースコードを表示問題を報告プレイグラウンドで表示

<Select.Root defaultValue="apple">
  <Select.Trigger />
  <Select.Content>
    <Select.Group>
      <Select.Label>Fruits</Select.Label>
      <Select.Item value="orange">Orange</Select.Item>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="grape" disabled>
        Grape
      </Select.Item>
    </Select.Group>
    <Select.Separator />
    <Select.Group>
      <Select.Label>Vegetables</Select.Label>
      <Select.Item value="carrot">Carrot</Select.Item>
      <Select.Item value="potato">Potato</Select.Item>
    </Select.Group>
  </Select.Content>
</Select.Root>

API リファレンス

ルート

セレクトのすべてのパーツを含みます。 Select プリミティブのルートパーツからプロパティを継承します。

プロパティ	型	デフォルト
`size`	`Responsive<"1" \| "2" \| "3">`	`"2"`

トリガー

セレクトを切り替えるボタンです。このコンポーネントは、Select プリミティブのトリガーおよび値パーツからプロパティを継承します。共通マージンプロパティをサポートしています。

プロパティ	型	デフォルト
`variant`	`"classic" \| "surface" \| "soft" \| "ghost"`	`"surface"`
`color`	`enum`	デフォルト値なし
`radius`	`"none" \| "small" \| "medium" \| "large" \| "full"`	デフォルト値なし
`placeholder`	`string`	デフォルト値なし

コンテンツ

セレクトが開いたときにポップアウトするコンポーネントです。 Select.Portal プリミティブおよび Select.Content プリミティブパーツからプロパティを継承します。

プロパティ	型	デフォルト
`variant`	`"solid" \| "soft"`	`"solid"`
`color`	`enum`	デフォルト値なし
`highContrast`	`boolean`	デフォルト値なし

アイテム

セレクトアイテムを含むコンポーネントです。Select.Item プリミティブパーツからプロパティを継承します。

グループ

複数のアイテムをグループ化するために使用します。 Select.Group プリミティブパーツからプロパティを継承します。自動ラベル付けによるアクセシビリティを確保するために、Select.Label と組み合わせて使用してください。

ラベル

グループのラベルをレンダリングするために使用します。矢印キーを使用してフォーカスすることはできません。 Select.Label プリミティブパーツからプロパティを継承します。

セパレーター

Select 内のアイテムを視覚的に分離するために使用します。 Select.Separator プリミティブパーツからプロパティを継承します。

例

サイズ

size プロパティを使用してサイズを制御します。

<Flex gap="3" align="center">
  <Select.Root size="1" defaultValue="apple">
    <Select.Trigger />
    <Select.Content>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>

  <Select.Root size="2" defaultValue="apple">
    <Select.Trigger />
    <Select.Content>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>

  <Select.Root size="3" defaultValue="apple">
    <Select.Trigger />
    <Select.Content>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>
</Flex>

バリアント

Trigger および Content の variant プロパティを使用して、視覚スタイルをカスタマイズします。

<Flex gap="3" align="center">
  <Select.Root defaultValue="apple">
    <Select.Trigger variant="surface" />
    <Select.Content>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>

  <Select.Root defaultValue="apple">
    <Select.Trigger variant="classic" />
    <Select.Content>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>

  <Select.Root defaultValue="apple">
    <Select.Trigger variant="soft" />
    <Select.Content>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>
</Flex>

ゴースト

ghost トリガーバリアントを使用すると、視覚的に含む要素なしでトリガーをレンダリングできます。ゴーストトリガーは、パディングされたアクティブ状態とホバー状態を維持しながら、兄弟要素に対して視覚的に位置合わせするために負のマージンを使用するため、レイアウトの動作が異なります。

<Flex gap="3" align="center">
  <Select.Root defaultValue="apple">
    <Select.Trigger variant="surface" />
    <Select.Content>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>

  <Select.Root defaultValue="apple">
    <Select.Trigger variant="ghost" />
    <Select.Content>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>
</Flex>

色

Trigger および Content の color プロパティを使用して、特定の色の値を割り当てます。

<Flex gap="3">
  <Select.Root defaultValue="apple">
    <Select.Trigger color="indigo" variant="soft" />
    <Select.Content color="indigo">
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>

  <Select.Root defaultValue="apple">
    <Select.Trigger color="cyan" variant="soft" />
    <Select.Content color="cyan">
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>

  <Select.Root defaultValue="apple">
    <Select.Trigger color="orange" variant="soft" />
    <Select.Content color="orange">
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>

  <Select.Root defaultValue="apple">
    <Select.Trigger color="crimson" variant="soft" />
    <Select.Content color="crimson">
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>
</Flex>

ハイコントラスト

Content の highContrast プロパティを使用して、アイテムのコントラストを上げます。

<Flex gap="3">
  <Select.Root defaultValue="apple">
    <Select.Trigger color="gray" />
    <Select.Content color="gray" variant="solid">
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>

  <Select.Root defaultValue="apple">
    <Select.Trigger color="gray" />
    <Select.Content color="gray" variant="solid" highContrast>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>
</Flex>

半径

radius プロパティを使用して、特定の半径値を割り当てます。

<Flex gap="3">
  <Select.Root defaultValue="apple">
    <Select.Trigger radius="none" />
    <Select.Content>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>

  <Select.Root defaultValue="apple">
    <Select.Trigger radius="large" />
    <Select.Content>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>

  <Select.Root defaultValue="apple">
    <Select.Trigger radius="full" />
    <Select.Content>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="orange">Orange</Select.Item>
    </Select.Content>
  </Select.Root>
</Flex>

プレースホルダー

placeholder プロパティを使用して、初期値を必要としない Trigger を作成します。

<Select.Root>
  <Select.Trigger placeholder="Pick a fruit" />
  <Select.Content>
    <Select.Group>
      <Select.Label>Fruits</Select.Label>
      <Select.Item value="orange">Orange</Select.Item>
      <Select.Item value="apple">Apple</Select.Item>
      <Select.Item value="grape" disabled>
        Grape
      </Select.Item>
    </Select.Group>
    <Select.Separator />
    <Select.Group>
      <Select.Label>Vegetables</Select.Label>
      <Select.Item value="carrot">Carrot</Select.Item>
      <Select.Item value="potato">Potato</Select.Item>
    </Select.Group>
  </Select.Content>
</Select.Root>

位置

position="popper" プロパティを設定して、セレクトメニューをトリガーの下に配置します。

<Select.Root defaultValue="apple">
  <Select.Trigger />
  <Select.Content position="popper">
    <Select.Item value="apple">Apple</Select.Item>
    <Select.Item value="orange">Orange</Select.Item>
  </Select.Content>
</Select.Root>

SSRを使用する場合

サーバーサイドレンダリングを使用する場合、ハイドレーション後にレイアウトシフトが発生する可能性があります。これは、Trigger がクライアントサイドコードを実行して、選択されたアイテムのテキストを表示するためです。レイアウトシフトを回避するには、値をマッピングして手動でレンダリングします。

() => {
  const data = {
    apple: 'Apple',
    orange: 'Orange',
  };
  const [value, setValue] = React.useState('apple');
  return (
    <Select.Root value={value} onValueChange={setValue}>
      <Select.Trigger>{data[value]}</Select.Trigger>
      <Select.Content>
        <Select.Item value="apple">Apple</Select.Item>
        <Select.Item value="orange">Orange</Select.Item>
      </Select.Content>
    </Select.Root>
  );
};

アイコン付き

子要素を手動で制御することで、Trigger が値をレンダリングする方法をカスタマイズできます。たとえば、選択されたアイテムのテキストの横にアイコンをレンダリングできます。

() => {
  const data = {
    light: { label: 'Light', icon: <SunIcon /> },
    dark: { label: 'Dark', icon: <MoonIcon /> },
  };
  const [value, setValue] = React.useState('light');
  return (
    <Flex direction="column" maxWidth="160px">
      <Select.Root value={value} onValueChange={setValue}>
        <Select.Trigger>
          <Flex as="span" align="center" gap="2">
            {data[value].icon}
            {data[value].label}
          </Flex>
        </Select.Trigger>
        <Select.Content position="popper">
          <Select.Item value="light">Light</Select.Item>
          <Select.Item value="dark">Dark</Select.Item>
        </Select.Content>
      </Select.Root>
    </Flex>
  );
};

前へセグメントコントロール

次へセパレーター

GitHub でこのページを編集する。