Select

Stores multiple options and lets the user pick one. Use DropdownMenu for actions instead.

Last updated 11/1/2024

Size

Two sizes: Small and Medium.

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>
  );
}

States

Three states. In error state, show details in a message.

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>
  );
}