Neumorphism UI

Select

Use Select for one or more choices in a compact native menu. Choose Combobox when readers need to search the options.

Preview

Grouped regions and a locked choice

Choose a city from Asia Pacific or North America groups and compare a disabled administrator-selected value.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/select

Install the shared base once, then add components and their dependencies with the CLI.

Grouped regions and a locked choice

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

Usage

Label Select, assign a form name, and add SelectItem options with stable values. Use SelectGroup when the choices need named groups.

"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 Reference

Uses native select, optgroup, and option elements with an inset field and decorative chevron. Preserves the platform picker on mobile and native form submission.

ComponentPropTypeDefaultDescription
Selectvalue / defaultValuestring | string[]—The controlled selected value or initial uncontrolled value.
SelectonChangeReact.ChangeEventHandler<HTMLSelectElement>—Called when the native select value changes.
Selectdisabled / required / multiplebooleanfalseSets native select constraints and multiple selection.
SelectItemvaluerequiredstring | number | readonly string[]—The value submitted by the option.
SelectGrouplabelrequiredstring—The label for an optgroup of options.

Accessibility

  • 01

    Connect Label htmlFor to the Select id.

  • 02

    When the first option acts as a placeholder, combine an empty value with disabled and retain a real Label.

  • 03

    Because it uses native select, operating-system keyboard and mobile picker behavior is preserved.