Component

Select

A native picker for finite choices, with browser keyboard and mobile behavior.

Preview

Region

Installation

Packages are unreleased. Follow the packed artifact setup for package mode, or run the local CLI in copy mode and complete the reported npm, token CSS, and Tailwind setup.

pnpm exec ui add select

Full installation guide

Usage

This example uses package mode. In copy mode, import the generated component from your project and complete the manual setup steps in the installation guide.

import { Select } from '@nimjs/ui';

export function Example() {
  return (
    <label>
      Region
      <Select defaultValue="eu">
        <optgroup label="Available">
          <option value="eu">Europe</option>
          <option value="us">United States</option>
        </optgroup>
        <option value="ap" disabled>Asia Pacific</option>
      </Select>
    </label>
  );
}

System metadata

Registry

select

Category: forms

Status: preview

Version marker: 0.0.0 (unreleased)

Files

select.tsx

Tokens

backgroundforegroundinputringdestructiveradius

Dependencies

utilstokens

Copy-mode npm packages

clsxtailwind-merge

Accessibility

focus visiblekeyboard accessiblenative semanticsscreen reader readable

Anatomy

Select

Native select element.

Usage patterns

form control

Native select with grouped and disabled options.

API and states

Select accepts native select attributes, including value, defaultValue, onChange, required, and disabled. Compose native option and optgroup elements as children.

Accessibility

Use a visible label or Field. The browser supplies keyboard navigation, typeahead, disabled option handling, and the platform picker on mobile.