Selectセレクト

複数の選択肢を格納し、ユーザーは1つの選択肢を選ぶコンポーネントです。選択肢ではなくアクションを表示する場合は、DropdownMenuを使用してください。

更新 2024/11/1

サイズ

Small、Mediumの2種類があります。

Small
Medium: ラベル必須

import { Select } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function SizeSample() {
  return (
    <Dl>
      <Dt>Small</Dt>
      <Dd>
        <Select
          size="small"
          label="ラベル"
          placeholder="選択してください"
          required
          items={[
            { label: "React", value: "React" },
            { label: "Vue", value: "Vue" },
            { label: "Angular", value: "Angular" },
            { label: "Svelte", value: "Svelte" },
            { label: "Ember", value: "Ember" },
          ]}
        />
      </Dd>

      <Dt>Medium</Dt>
      <Dd>
        <Select
          size="medium"
          label="ラベル"
          placeholder="選択してください"
          required
          items={[
            { label: "React", value: "React" },
            { label: "Vue", value: "Vue" },
            { label: "Angular", value: "Angular" },
            { label: "Svelte", value: "Svelte" },
            { label: "Ember", value: "Ember" },
          ]}
        />
      </Dd>
    </Dl>
  );
}

状態

3種類の状態があります。エラー状態においては、エラーの詳細をメッセージ表示してください。

Enabled: ラベル必須
Error: ラベル必須
エラーメッセージ
Disabled: ラベル必須

import { Select } from "@serendie/ui";
import { Dd, Dl, Dt } from "src/components/LayoutUtils";

export function StateSample() {
  return (
    <Dl>
      <Dt>Enabled</Dt>
      <Dd>
        <Select
          label="ラベル"
          placeholder="選択してください"
          required
          items={[
            { label: "React", value: "React" },
            { label: "Vue", value: "Vue" },
            { label: "Angular", value: "Angular" },
            { label: "Svelte", value: "Svelte" },
            { label: "Ember", value: "Ember" },
          ]}
        />
      </Dd>

      <Dt>Error</Dt>
      <Dd>
        <Select
          label="ラベル"
          placeholder="選択してください"
          required
          invalid
          invalidMessage="エラーメッセージ"
          items={[
            { label: "React", value: "React" },
            { label: "Vue", value: "Vue" },
            { label: "Angular", value: "Angular" },
            { label: "Svelte", value: "Svelte" },
            { label: "Ember", value: "Ember" },
          ]}
        />
      </Dd>

      <Dt>Disabled</Dt>
      <Dd>
        <Select
          label="ラベル"
          placeholder="選択してください"
          required
          disabled
          items={[
            { label: "React", value: "React" },
            { label: "Vue", value: "Vue" },
            { label: "Angular", value: "Angular" },
            { label: "Svelte", value: "Svelte" },
            { label: "Ember", value: "Ember" },
          ]}
        />
      </Dd>
    </Dl>
  );
}