Select

省スペースのネイティブメニューで値を選ぶ場合に使います。選択肢を検索する場合は Combobox が適しています。

プレビュー

地域グループと固定された選択

アジア太平洋・北米のグループから都市を選び、管理者指定の無効な選択肢と比較します。

地域

無効

インストール

この Registry を初めて使う場合は、先に基本設定と共通スタイルの導入を完了してください。

npx shadcn@latest add @neumorphism-ui/select

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

地域グループと固定された選択

npx shadcn@latest add @neumorphism-ui/label @neumorphism-ui/select

Registry JSON

使い方

Select にラベルとフォーム名を付け、安定した value を持つ SelectItem を追加します。名前付きの選択肢グループには SelectGroup を使います。

"use client";

import { useId } from "react";
import { Label } from "@/components/ui/label";
import { Select, SelectItem } from "@/components/ui/select";

export default function Example() {
  const id = useId();
  return (
    <div className="grid gap-2">
      <Label htmlFor={id}>Role</Label>
      <Select id={id} name="role" defaultValue="designer">
        <SelectItem value="designer">Designer</SelectItem>
        <SelectItem value="developer">Developer</SelectItem>
      </Select>
    </div>
  );
}

API リファレンス

native select、optgroup、option を inset field と装飾用 chevron とともに使用します。モバイルでは platform picker を維持し、native form 送信にも対応します。

コンポーネント	プロパティ	型	デフォルト	説明
`Select`	`value / defaultValue`	`string \| string[]`	`—`	制御された選択値、または非制御時の初期値です。
`Select`	`onChange`	`React.ChangeEventHandler<HTMLSelectElement>`	`—`	native select の値が変わったときに呼び出されます。
`Select`	`disabled / required / multiple`	`boolean`	`false`	native select の制約と複数選択を設定します。
`SelectItem`	`value`必須	`string \| number \| readonly string[]`	`—`	option が送信する値です。
`SelectGroup`	`label`必須	`string`	`—`	optgroup の選択肢グループ名です。

プレビュー

地域グループと固定された選択

インストール

使い方

API リファレンス

アクセシビリティ