Neumorphism UI

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 参考

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

组件属性类型默认值说明
Selectvalue / defaultValuestring | string[]—受控的选中值或非受控初始值。
SelectonChangeReact.ChangeEventHandler<HTMLSelectElement>—原生 select 值变化时调用。
Selectdisabled / required / multiplebooleanfalse设置原生 select 的输入限制及多选模式。
SelectItemvalue必填string | number | readonly string[]—option 在表单中提交的值。
SelectGrouplabel必填string—optgroup 的选项组名称。

无障碍

  • 01

    将 Label 的 htmlFor 与 Select 的 id 关联。

  • 02

    将第一个 option 用作 placeholder 时，应组合空 value 与 disabled，同时保留真实 Label。

  • 03

    由于使用原生 select，会完整保留操作系统的键盘和移动 picker 行为。