Select

The Select component provides a native-friendly dropdown picker built with React Native's Pressable, Modal, and ScrollView. It includes a trigger button with a chevron indicator, a positioned dropdown content panel, selectable items with check marks, and support for groups, labels, and separators.

Preview

Installation

npx novaui-cli add select

Import

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectGroup,
  SelectLabel,
  SelectSeparator,
} from 'novaui-components'

Basic Usage

A select dropdown with a placeholder and selectable items:

import { useState } from 'react'
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from 'novaui-components'

export function BasicSelect() {
  const [value, setValue] = useState<string>()

  return (
    <Select value={value} onValueChange={setValue}>
      <SelectTrigger>
        <SelectValue placeholder="Select a fruit..." />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="apple">Apple</SelectItem>
        <SelectItem value="banana">Banana</SelectItem>
        <SelectItem value="cherry">Cherry</SelectItem>
        <SelectItem value="grape">Grape</SelectItem>
      </SelectContent>
    </Select>
  )
}

Examples

With Selected Value

<Select value="Cherry" onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="Select a fruit..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="Apple">Apple</SelectItem>
    <SelectItem value="Banana">Banana</SelectItem>
    <SelectItem value="Cherry">Cherry</SelectItem>
  </SelectContent>
</Select>

With Groups and Labels

<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="Select a timezone..." />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>North America</SelectLabel>
      <SelectItem value="est">Eastern (EST)</SelectItem>
      <SelectItem value="cst">Central (CST)</SelectItem>
      <SelectItem value="pst">Pacific (PST)</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Europe</SelectLabel>
      <SelectItem value="gmt">Greenwich (GMT)</SelectItem>
      <SelectItem value="cet">Central European (CET)</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Small Size

<Select value={value} onValueChange={setValue}>
  <SelectTrigger size="sm">
    <SelectValue placeholder="Size..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="sm">Small</SelectItem>
    <SelectItem value="md">Medium</SelectItem>
    <SelectItem value="lg">Large</SelectItem>
  </SelectContent>
</Select>

Disabled Item

<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="Select a plan..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="free">Free</SelectItem>
    <SelectItem value="pro">Pro</SelectItem>
    <SelectItem value="enterprise" disabled>Enterprise (coming soon)</SelectItem>
  </SelectContent>
</Select>

Props API

SelectProps

Prop	Type	Default	Description
`value`	`string`	-	The currently selected value
`onValueChange`	`(value: string) => void`	-	Callback fired when a selection is made
`children`	`React.ReactNode`	-	SelectTrigger and SelectContent

SelectTriggerProps

Extends React.ComponentPropsWithoutRef<typeof Pressable> and includes:

Prop	Type	Default	Description
`size`	`'default' \| 'sm'`	`'default'`	The size of the trigger button (`h-9` or `h-8`)
`className`	`string`	-	Additional CSS classes for the trigger

SelectValueProps

Prop	Type	Default	Description
`placeholder`	`string`	-	Text displayed when no value is selected
`className`	`string`	-	Additional CSS classes

SelectContentProps

Extends React.ComponentPropsWithoutRef<typeof View> and includes:

Prop	Type	Default	Description
`position`	`'item-aligned' \| 'popper'`	`'item-aligned'`	Positioning strategy for the dropdown
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Horizontal alignment of the dropdown
`className`	`string`	-	Additional CSS classes for the content panel

SelectItemProps

Extends React.ComponentPropsWithoutRef<typeof Pressable> and includes:

Prop	Type	Default	Description
`value`	`string`	required	The value this item represents
`disabled`	`boolean`	`false`	When `true`, the item cannot be selected
`className`	`string`	-	Additional CSS classes

Best Practices

Always include a placeholder: Use SelectValue with a placeholder so users know what to choose
Group related items: Use SelectGroup and SelectLabel to organize long option lists
Keep lists manageable: For very long lists, consider adding search functionality or using Combobox instead
Use for 5+ options: For fewer options, RadioGroup provides a more visible choice

Use RadioGroup when all options should be visible at once
Use Combobox for searchable/filterable selection
Pair with Field and FieldLabel for accessible labeled form controls

Continue reading

Getting Started Components Overview Popular: Dialog SEO Playbook

Select

Continue reading

On this page