Combobox

A searchable dropdown selector that combines a text input with a filterable list of options.

The Combobox component combines a trigger button with a searchable popup list. It supports single selection, search filtering, groups with headings, and customizable items with check indicators. Built with React Native's Modal, TextInput, and ScrollView.

Preview

Installation

npx novaui-cli add combobox

Import

import {
  Combobox,
  ComboboxTrigger,
  ComboboxContent,
  ComboboxInput,
  ComboboxList,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxItem,
  ComboboxSeparator,
} from 'novaui-components'

Basic Usage

import { useState } from 'react'
import {
  Combobox,
  ComboboxTrigger,
  ComboboxContent,
  ComboboxInput,
  ComboboxList,
  ComboboxEmpty,
  ComboboxItem,
} from 'novaui-components'
import { Text } from 'react-native'

const frameworks = [
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue' },
  { value: 'angular', label: 'Angular' },
  { value: 'svelte', label: 'Svelte' },
]

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

  return (
    <Combobox value={value} onValueChange={setValue}>
      <ComboboxTrigger>
        <Text className="text-sm text-foreground">
          {frameworks.find((f) => f.value === value)?.label ?? 'Select a framework...'}
        </Text>
      </ComboboxTrigger>
      <ComboboxContent>
        <ComboboxInput placeholder="Search framework..." />
        <ComboboxList>
          <ComboboxEmpty>No framework found.</ComboboxEmpty>
          {frameworks.map((f) => (
            <ComboboxItem key={f.value} value={f.value} label={f.label}>
              {f.label}
            </ComboboxItem>
          ))}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  )
}

With Groups

<Combobox value={value} onValueChange={setValue}>
  <ComboboxTrigger>
    <Text className="text-sm text-foreground">
      {selectedLabel ?? 'Select...'}
    </Text>
  </ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Search..." />
    <ComboboxList>
      <ComboboxEmpty>No results found.</ComboboxEmpty>
      <ComboboxGroup heading="Frontend">
        <ComboboxItem value="react" label="React">React</ComboboxItem>
        <ComboboxItem value="vue" label="Vue">Vue</ComboboxItem>
      </ComboboxGroup>
      <ComboboxSeparator />
      <ComboboxGroup heading="Backend">
        <ComboboxItem value="express" label="Express">Express</ComboboxItem>
        <ComboboxItem value="fastify" label="Fastify">Fastify</ComboboxItem>
      </ComboboxGroup>
    </ComboboxList>
  </ComboboxContent>
</Combobox>

Props API

Combobox

Extends React.ComponentPropsWithoutRef<typeof View>:

Prop	Type	Default	Description
`value`	`string \| string[]`	-	The selected value(s)
`onValueChange`	`(value: string \| string[]) => void`	-	Callback when the selection changes
`defaultOpen`	`boolean`	`false`	Whether the content is initially open
`open`	`boolean`	-	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Callback when open state changes
`className`	`string`	-	Additional CSS classes

ComboboxTrigger

Extends React.ComponentPropsWithoutRef<typeof Pressable>:

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as the child element
`className`	`string`	-	Additional CSS classes

ComboboxContent

Extends React.ComponentPropsWithoutRef<typeof View>:

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

ComboboxInput

Extends React.ComponentPropsWithoutRef<typeof TextInput>:

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

ComboboxList

Extends React.ComponentPropsWithoutRef<typeof ScrollView>:

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

ComboboxGroup

Prop	Type	Default	Description
`heading`	`string`	-	Group heading text
`className`	`string`	-	Additional CSS classes

ComboboxItem

Extends React.ComponentPropsWithoutRef<typeof Pressable>:

Prop	Type	Default	Description
`value`	`string`	required	The value of the item
`label`	`string`	required	Label used for search filtering
`className`	`string`	-	Additional CSS classes

Best Practices

Always include search: The search input is the core advantage over a plain Select
Provide an empty state: Use ComboboxEmpty to show a message when no items match the search
Use groups for large lists: Organize items into ComboboxGroup with headings
Set label for filtering: The label prop on ComboboxItem controls search matching
Close on select: Items automatically close the combobox and clear the search on selection

Select - For simple dropdown selection without search
Command - For a command palette with broader action support
Input - For free-text entry

Continue reading

Getting Started Components Overview Popular: Dialog SEO Playbook

Combobox

Continue reading

On this page