Toucan

Add it to your project

Eject the complete select group, then import from its generated local barrel. The copied source and CSS belong to your application.

bash

pnpm exec toucan eject select

bash

npx toucan eject select

app.tsx

import { Select } from '@/components/toucan/select';

Use when

Users choose one value from a compact list that should not remain fully visible.

Avoid when

There are only a few important choices; Radio is easier to scan.

Example

Country

API reference

Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.

Select

Props type: SelectProps

Name	Type	Default	Required	Description
`defaultValue`	`string`	`undefined`	No	Initial value when the component is uncontrolled.
`description`	`string`	`undefined`	No	Supporting text connected to the control.
`disabled`	`boolean`	`undefined`	No	Prevents interaction when true.
`error`	`string`	`undefined`	No	Validation error text or error state.
`hideLabel`	`boolean`	`undefined`	No	Visually hide the label while keeping it available to assistive technology.
`label`	`string`	`undefined`	No	Visible or accessible label for the control.
`onChange`	`(value: string) => void`	`undefined`	No	Called when the value changes.
`options`	`SelectOption[]`	—	Required	Available select options and their values.
`placeholder`	`string`	`'Select an option'`	No	Text shown before a select option has been chosen.
`renderOption`	`(option: SelectOption) => React.ReactNode`	`undefined`	No	Custom render function for option content. Receives the option and returns a ReactNode.
`required`	`boolean`	`undefined`	No	Marks the control as required.
`size`	`"sm" \| "md" \| "lg"`	`undefined`	No	Visual size variant.
`value`	`string`	`undefined`	No	Controlled value.

Also accepts the native div attributes that are not replaced by a Toucan prop.

Type exports

SelectOption, SelectProps

export type SelectOption = { value: string; label: string; disabled?: boolean };

Accessibility

Implements combobox and listbox semantics.
Supports keyboard navigation, typeahead, dismissal, and focus return.

Token families

selectfocus

Related components

Radio Input