表单与选择@neumorphism-ui/select

Select

直接使用原生 select、optgroup 和 option，并应用 inset field 与装饰性 chevron。保留移动平台的系统 picker 和表单提交行为。

@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>`	`—`	原生 select 值变化时调用。
`Select`	`disabled / required / multiple`	`boolean`	`false`	设置原生 select 的输入限制及多选模式。
`SelectItem`	`value`必填	`string \| number \| readonly string[]`	`—`	option 在表单中提交的值。
`SelectGroup`	`label`必填	`string`	`—`	optgroup 的选项组名称。

预览

安装

用法

Import

Example

API 参考

无障碍