Select

Displays a list of options for the user to pick from—triggered by a button.

Select

Select displays a list of options for the user to pick from—triggered by a button.

Import

import { Select } from 'radix-native-ui';

Anatomy

The Select component is composed of the following parts:

<Select.Root>
  <Select.Trigger>
    <Select.Value />
  </Select.Trigger>
  <Select.Portal>
    <Select.Overlay />
    <Select.Content>
      <Select.Group>
        <Select.Label />
        <Select.Item />
      </Select.Group>
      <Select.Separator />
    </Select.Content>
  </Select.Portal>
</Select.Root>

Props

Root

Trigger

Value

Content

Item

Group

Label

Separator

Examples

Basic Select

import { Select, Button } from 'radix-native-ui';
import { useState } from 'react';

function BasicSelect() {
  const [fruit, setFruit] = useState<string>('');

  return (
    <Select.Root value={fruit} onValueChange={setFruit}>
      <Select.Trigger asChild>
        <Button variant="solid">
          <Button.Label>
            <Select.Value placeholder="Select a fruit" />
          </Button.Label>
        </Button>
      </Select.Trigger>
      <Select.Portal>
        <Select.Overlay />
        <Select.Content>
          <Select.Item value="apple">Apple</Select.Item>
          <Select.Item value="banana">Banana</Select.Item>
          <Select.Item value="orange">Orange</Select.Item>
          <Select.Item value="grape">Grape</Select.Item>
        </Select.Content>
      </Select.Portal>
    </Select.Root>
  );
}

With Default Value (Uncontrolled)

<Select.Root color="indigo" variant="solid" defaultValue="carrot">
  <Select.Trigger asChild>
    <Button>
      <Button.Label>
        <Select.Value />
      </Button.Label>
    </Button>
  </Select.Trigger>
  <Select.Portal>
    <Select.Overlay />
    <Select.Content>
      <Select.Item value="carrot">Carrot</Select.Item>
      <Select.Item value="broccoli">Broccoli</Select.Item>
      <Select.Item value="spinach">Spinach</Select.Item>
      <Select.Item value="potato">Potato</Select.Item>
    </Select.Content>
  </Select.Portal>
</Select.Root>

With Groups

<Select.Root value={country} onValueChange={setCountry}>
  <Select.Trigger asChild>
    <Button variant="surface">
      <Button.Label>
        <Select.Value placeholder="Select a country" />
      </Button.Label>
    </Button>
  </Select.Trigger>
  <Select.Portal>
    <Select.Overlay />
    <Select.Content>
      <Select.Group>
        <Select.Label>Africa</Select.Label>
        <Select.Item value="nigeria">Nigeria</Select.Item>
        <Select.Item value="ghana">Ghana</Select.Item>
        <Select.Item value="kenya">Kenya</Select.Item>
      </Select.Group>
      <Select.Separator />
      <Select.Group>
        <Select.Label>Europe</Select.Label>
        <Select.Item value="uk">United Kingdom</Select.Item>
        <Select.Item value="france">France</Select.Item>
        <Select.Item value="germany">Germany</Select.Item>
      </Select.Group>
      <Select.Separator />
      <Select.Group>
        <Select.Label>Asia</Select.Label>
        <Select.Item value="japan">Japan</Select.Item>
        <Select.Item value="china">China</Select.Item>
        <Select.Item value="india">India</Select.Item>
      </Select.Group>
    </Select.Content>
  </Select.Portal>
</Select.Root>

With Disabled Items

<Select.Root>
  <Select.Trigger asChild>
    <Button variant="outline">
      <Button.Label>
        <Select.Value placeholder="Some options disabled" />
      </Button.Label>
    </Button>
  </Select.Trigger>
  <Select.Portal>
    <Select.Overlay />
    <Select.Content>
      <Select.Item value="1">Option 1 (Available)</Select.Item>
      <Select.Item value="2" disabled>
        Option 2 (Disabled)
      </Select.Item>
      <Select.Item value="3">Option 3 (Available)</Select.Item>
      <Select.Item value="4" disabled>
        Option 4 (Disabled)
      </Select.Item>
    </Select.Content>
  </Select.Portal>
</Select.Root>

Size Variants

<Select.Root>
  <Select.Trigger asChild>
    <Button variant="outline" size={1}>
      <Button.Label>
        <Select.Value placeholder="Size 1" />
      </Button.Label>
    </Button>
  </Select.Trigger>
  <Select.Portal>
    <Select.Overlay />
    <Select.Content size={1}>
      <Select.Item value="a">Option A</Select.Item>
      <Select.Item value="b">Option B</Select.Item>
    </Select.Content>
  </Select.Portal>
</Select.Root>

Custom Trigger

<Select.Root value={value} onValueChange={setValue}>
  <Select.Trigger>
    <View style={styles.customTrigger}>
      <Text>Custom Trigger: {value || 'Select...'}</Text>
      <ChevronDownIcon />
    </View>
  </Select.Trigger>
  <Select.Portal>
    <Select.Overlay />
    <Select.Content>
      <Select.Item value="a">Option A</Select.Item>
      <Select.Item value="b">Option B</Select.Item>
    </Select.Content>
  </Select.Portal>
</Select.Root>

Animation & Haptics

The Select component uses AnimatedPressable for enhanced interaction feedback:

• Trigger: Provides press animation and haptic feedback when opening/closing the dropdown
• Items: Each item has press animation and haptic feedback when selected

Accessibility

• Supports screen readers with proper accessibilityRole="menuitem" on items
• Disabled items announce as disabled via accessibilityState
• Selected state is properly announced
• Keyboard navigation support through modal presentation

Related

• DropdownMenu - Menu with actions
• RadioGroup - Radio button group for inline selection
• TextField - Text input for free-form text