フォームと選択@neumorphism-ui/select

Select

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

@neumorphism-ui/select

Registry JSON

プレビュー

地域

無効

インストール

npx shadcn@latest add @neumorphism-ui/select

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

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

Import

import {
  Select,
  SelectGroup,
  SelectItem,
} from "@/components/ui/select"
import { Label } from "@/components/ui/label"

Example

<div className="grid gap-2">
  <Label htmlFor="role">役割</Label>
  <Select id="role" name="role" defaultValue="designer">
    <SelectItem value="designer">デザイナー</SelectItem>
    <SelectItem value="developer">開発者</SelectItem>
    <SelectItem value="founder">創業者</SelectItem>
  </Select>
</div>

API リファレンス

コンポーネント	プロパティ	型	デフォルト	説明
`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 の選択肢グループ名です。

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ