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:

Terminal

npx nocta-ui add select

Then import the components you need:

Import

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

Basic Usage

Default Select

Sizes

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

Small

Medium

Large

Disabled State

Customization

Custom Styling

The Select components accept className props for custom styling:

Custom Styling

<Select>
  <SelectTrigger className="w-full border-2 border-purple-300 focus-visible:border-purple-500">
    <SelectValue placeholder="Custom styled select" />
  </SelectTrigger>
  <SelectContent className="border-purple-300">
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
  </SelectContent>
</Select>

Props

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
`children`	`React.ReactNode`	—	Select content

SelectTrigger

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

SelectContent

Prop	Type	Default	Description
`className`	`string`	`''`	Additional CSS classes
`position`	`'bottom' \| 'top'`	`'bottom'`	Dropdown position
`children`	`React.ReactNode`	—	Content (SelectItems)

SelectItem

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

SelectValue

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.

Select

On this page