Select

A flexible select component for choosing from a list of options with multiple sizes and dark mode support

Installation

Install the Select component using the nocta-ui CLI:

npx nocta-ui add select

Import the components you need:

import {
  Select,
  SelectTrigger,
  SelectContent,
  SelectItem,
  SelectValue,
} from '@/components/ui/select';

Visual variants help represent error and success states alongside the default appearance.

Default

Error

Please select an option

Success

Looks good!

Three size options are available: sm, md, and lg. The default size is md.

Small

Medium

Large

Prop	Type	Default	Description
`value`	`string`	—	Controlled value
`defaultValue`	`string`	—	Default value for uncontrolled component
`onValueChange`	`(value: string) => void`	—	Callback when value changes
`disabled`	`boolean`	`false`	Disable the select
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Select size
`variant`	`'default' \| 'error' \| 'success'`	`'default'`	Visual variant
`children`	`React.ReactNode`	—	Select content

Prop	Type	Default	Description
`className`	`string`	`''`	Additional CSS classes
`size`	`'sm' \| 'md' \| 'lg'`	—	Override size from context
`variant`	`'default' \| 'error' \| 'success'`	—	Override variant from context
`children`	`React.ReactNode`	—	Trigger content

Prop	Type	Default	Description
`className`	`string`	`''`	Additional CSS classes
`portal`	`boolean`	`true`	Render the dropdown in a React portal
`fixed`	`boolean`	`false`	Use fixed positioning to avoid clipping
`children`	`React.ReactNode`	—	Content (SelectItems)

Prop	Type	Default	Description
`value`	`string`	—	Item value
`disabled`	`boolean`	`false`	Disable the item
`className`	`string`	`''`	Additional CSS classes
`children`	`React.ReactNode`	—	Item content

Prop	Type	Default	Description
`placeholder`	`string`	`'Select an option...'`	Placeholder text
`className`	`string`	`''`	Additional CSS classes

All components also accept their respective HTML element attributes.