On this page

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@latest

Includes @ninna-ui/core. CSS setup required.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.

Live preview/ Default

Variants

Select supports three visual variants: outline, filled, and flushed.

Live preview/ Default

Outline

Filled

Flushed

Sizes

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

Live preview/ Default

Colors

Select supports multiple color themes. Each color affects the border, focus ring, and text color of the trigger.

Live preview/ Default

Clearable

Select with a clear button to reset the selection.

Live preview/ Default

Selected: react

Controlled

Fully controlled select with open/onOpenChange props.

Live preview/ Default

Open: No | Value: None

With Groups

Select with grouped options and separators.

Live preview/ Default

States

Select in different states.

Live preview/ Default

With Icons (Recipe)

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

Live preview/ Default

Composition recipe: Use custom content inside SelectItem for icons.

React Hook Form

Select works with React Hook Form using the Controller pattern.

Live preview/ Default

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