REACT-NATIVES

WIRED FOR SPEED

react-natives v2.2.0

Theme

Light

Dark

Get Started

Components

Form Controls

Select

A compound dropdown select component with trigger, portal-based content, search filtering, single-select, and multi-select badge support.

Example

Preview

Code

Props

Select Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the select container.

isMulti

boolean

false

Enables multiple selected values and keeps the dropdown open by default after each item press.

selectedValue

string

—

The controlled selected value for single-select mode.

defaultValue

string

—

The initial selected value when uncontrolled in single-select mode.

onValueChange

(value: string) => void

—

Callback invoked when the selected value changes in single-select mode.

selectedValues

string[]

—

The controlled selected values for multi-select mode.

defaultValues

string[]

—

The initial selected values when uncontrolled in multi-select mode.

onValuesChange

(values: string[]) => void

—

Callback invoked when selected values change in multi-select mode.

valueLabels

Record<string, string>

—

Maps selected values to labels before dropdown items have registered themselves.

closeOnSelect

boolean

—

Overrides whether the dropdown closes after pressing an item. Defaults to true for single-select and false for multi-select.

searchValue

string

—

Controlled search text used by SelectSearchInput and item filtering.

defaultSearchValue

string

—

Initial search text when search is uncontrolled.

onSearchChange

(value: string) => void

—

Callback invoked when the SelectSearchInput value changes.

filterOption

(searchValue: string, option: SelectOption) => boolean

—

Custom filter predicate for matching dropdown items.

formatSelectedLabel

(items: SelectOption[]) => string

—

Customizes the summary text shown by SelectInput in multi-select mode.

size

'sm' | 'md' | 'lg' | 'xl'

'md'

Controls the size of the select trigger.

variant

'outline' | 'filled' | 'underlined' | 'rounded'

'outline'

The visual variant of the select trigger.

isDisabled

boolean

false

Disables the select.

isInvalid

boolean

false

Applies invalid/error styling to the select.

placeholder

string

—

Placeholder text shown when no value is selected.

SelectTrigger Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the select trigger button.

SelectInput Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the select input display.

placeholder

string

—

Placeholder text for the select input.

SelectIcon Props

Prop

Type

Default

Description

as

React.ElementType

—

The icon component to render as the dropdown indicator.

className

string

—

NativeWind utility classes for the select icon.

SelectBackdrop Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the select backdrop overlay.

SelectContent Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the dropdown content container.

SelectSearchInput Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the search input wrapper.

inputClassName

string

—

NativeWind utility classes for the text input element.

clearButtonClassName

string

—

NativeWind utility classes for the clear button.

isClearable

boolean

true

Shows a clear button when the search input has text.

SelectSelectedBadges Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the selected badges container.

maxVisible

number

—

Maximum number of selected badges to render before showing an overflow badge.

showRemoveButton

boolean

true

Controls whether each badge includes a remove button.

renderBadge

(item: SelectOption, helpers: { remove: () => void; isDisabled: boolean }) => React.ReactNode

—

Custom render function for selected badges.

SelectItem Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the select item.

label *

string

—

The display label for the item.

value *

string

—

The value associated with this item.

isDisabled

boolean

false

Disables the select item.

Usage Guidelines

When to use

Use Select for picking one or more options from a list that is too long for radio buttons or checkboxes.

Best practices

•

Use placeholder text to describe what should be selected.

•

Add SelectSearchInput for long option lists.

•

Use SelectSelectedBadges for multi-select values that users may need to remove quickly.

•

Use the same variant as your Input components for consistency.

Accessibility

Select trigger and items are accessible. Selected values are announced by screen readers, and multi-select items expose selected state.

Related Components

Radio

A compound radio button component for single-selection within a group, with indicator, icon, and label sub-components.

Input

A compound text input component with support for leading/trailing slots, icons, and multiple visual variants.

Checkbox

A compound checkbox component supporting individual and grouped selection with indicator, icon, and label sub-components.

FormControl

A compound wrapper that provides shared state (disabled, invalid, required, read-only) to its label, helper text, and error message children.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License