Select

Select component for choosing from a list of options with support for groups, search, and multiple sizes.

import { Select } from "@ninna-ui/forms"

pnpm add @ninna-ui/forms

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Select component in your application.

import { Select, SelectItem } from "@ninna-ui/forms";

export default function Example() {
  return (
    <Select placeholder="Select an option">
      <SelectItem value="option1">Option 1</SelectItem>
      <SelectItem value="option2">Option 2</SelectItem>
    </Select>
  );
}

Basic

Basic select with options.

Sizes

Select comes in 5 sizes: xs, sm, md, lg, and xl.

Colors

Select supports multiple color themes for focus states.

Clearable

Select with a clear button to reset the selection.

Selected: react

Controlled

Fully controlled select with open/onOpenChange props.

Open: No | Value: None

With Groups

Select with grouped options and separators.

States

Select in different states.

With Icons (Recipe)

Composition recipe showing how to add icons to select items using custom content.

Composition recipe: Use custom content inside SelectItem for icons.

React Hook Form

Select works with React Hook Form using the Controller pattern.

API Reference

Complete list of props for the Select component.

Props

Prop	Type	Default	Description
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size of the select
`color`	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Color theme of the select
`variant`	`'outline' \| 'filled' \| 'flushed'`	`'outline'`	Visual variant of the select
`value`	`string`	-	Controlled value
`defaultValue`	`string`	-	Default value for uncontrolled usage
`onValueChange`	`(value: string) => void`	-	Callback when value changes
`placeholder`	`string`	-	Placeholder text when no value is selected
`invalid`	`boolean`	`false`	Whether the select is in an invalid state
`clearable`	`boolean`	`false`	Whether the select can be cleared
`onClear`	`() => void`	-	Callback when clear button is clicked
`disabled`	`boolean`	`false`	Whether the select is disabled
`required`	`boolean`	`false`	Whether the select is required
`fullWidth`	`boolean`	`true`	Whether the select takes full width
`name`	`string`	-	Name for form submission
`open`	`boolean`	-	Whether the select dropdown is open (controlled)
`defaultOpen`	`boolean`	-	Default open state (uncontrolled)
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes
`aria-label`	`string`	-	Accessible label for the select trigger
`aria-labelledby`	`string`	-	ID of the element that labels the select

Accessibility

Built on Radix UI Select for full WAI-ARIA compliance
Supports aria-label and aria-labelledby props for labeling
Keyboard navigation: Arrow keys, Enter, Escape, and type-ahead search
Uses role="listbox" announced to screen readers
Proper focus states with visible outlines