Select

Status: Stable
Accessibility: Reviewed
Package: tenet-ui@0.5.0
Source: Select.tsx

import { Select } from 'tenet-ui';

Also accepts every prop of Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'value' | 'defaultValue'>.

Usage guidelines

When to use: choosing one option from a known list. Select is a fully accessible listbox combobox (keyboard, typeahead, aria-activedescendant) — not a native <select>. Use it inside a FormControl.

Rules

Give it an accessible name via FormControl.Label or aria-label.
Pass choices as the options array ({ value, label, disabled? }); use placeholder for the unselected state.
Control it with value + onChange(value), or leave uncontrolled with defaultValue. For form submission, pass name (it emits a hidden input).
Use size / fullWidth from the scale (block is the deprecated 0.3.0 name and warns); use invalid for validation state.
Never build a div-based dropdown by hand — getting the ARIA listbox + keyboard right is exactly what this component does for you.

Do / Don’t

✅ <Select options={[{ value: 'public', label: 'Public' }]} placeholder="Choose…" />
✅ inside a form: <FormControl><FormControl.Label>Visibility</FormControl.Label><Select options={…} /></FormControl>
❌ <div className="dropdown" onClick={…}> — not keyboard-accessible, no roles, no typeahead.

See also: Menu for actions, RadioGroup or SegmentedControl for a few visible options; system guideline forms.

Examples

3 stories for Select, open in Storybook

Default components-select--default
With Placeholder components-select--with-placeholder
With Disabled Option components-select--with-disabled-option

The full matrix (all args, controls, accessibility panel) is in Storybook.

Props

Prop	Type	Default	Description
`options` *	`SelectOption[]`	None	The options to choose from.
`value`	`string`	None	Controlled selected value.
`defaultValue`	`string`	None	Uncontrolled initial value.
`onChange`	`(value: string) => void`	None	Called with the newly selected value.
`placeholder`	`string`	`Select…`	Text shown when nothing is selected.
`size`	`'small' \| 'medium' \| 'large'` SelectSize	`medium`	Control height / font scale.
`fullWidth`	`boolean`	None	Stretch to fill the available width.
`block`deprecated	`boolean`	None	Stretch to fill the available width. Deprecated since 0.5.0. Use `fullWidth` instead (renamed in 0.4.0). `block` keeps working until 0.6.0.
`invalid`	`boolean`	`false`	Invalid state (danger border + aria-invalid).
`disabled`	`boolean`	`false`	Disable the control.
`required`	`boolean`	`false`	Required (sets aria-required; pairs with FormControl).
`name`	`string`	None	Form field name — emits a hidden input so the value submits with a form.
`id`	`string`	None	Id applied to the trigger (FormControl sets this automatically).
`className`	`string`	None
`aria-label`	`string`	None
`aria-describedby`	`string`	None

* requiredDeprecated props keep working for one minor release; the replacement is named in the row.

`SelectOption`

Member	Type	Default	Description
`value` *	`string`	None	Value submitted / reported on change.
`label` *	`string`	None	Visible option text.
`disabled`	`boolean`	None	Disable this option.