Select

Select built on Radix with optional inline search. Generic over the option type. Inline label/error/helperText supported.

Examples

With label

Country*

<Select
  label="Country"
  required
  value={country}
  onChange={setCountry}
  options={[
    { value: 'br', label: 'Brazil' },
    { value: 'us', label: 'United States' },
  ]}
/>

Searchable

Framework

<Select
  label="Framework"
  searchable
  value={framework}
  onChange={setFramework}
  options={[...]}
/>

API Reference

Props of the Select component.

Prop	Type	Default	Description
`value*`	`T`	—	—
`onChange`	`(value: T) => void`	—	—
`options*`	`{ value: T; label: string; disabled?: boolean }[]`	—	—
`label`	`string`	—	Renders FormLabel above the trigger.
`required`	`boolean`	`false`	—
`helperText`	`string`	—	—
`error`	`string \| boolean`	—	—
`placeholder`	`string`	`'Selecione...'`	—
`searchable`	`boolean`	`false`	—
`searchPlaceholder`	`string`	—	—
`disabled`	`boolean`	`false`	—
`variant`	`'outline' \| 'filled' \| 'underlined'`	`'outline'`	—