Components / inputs

Select

Trigger for choosing one option from a list.

import { Select } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { Select } from '@basiiik/ui';

<Select label="Country" />

• Example values were filled in for the required prop label: replace them with your own.
• Built on a native <select>. Hover and Focused are CSS; Filled is a chosen value; Error is the error prop; Disabled is the disabled attribute. The Figma Open state is the browser's own list, so it has no prop. Pass <option> children.
• Storybook: Inputs/Select.

Props

States. Built on a native <select>. Hover and Focused are CSS; Filled is a chosen value; Error is the error prop; Disabled is the disabled attribute. The Figma Open state is the browser's own list, so it has no prop. Pass <option> children.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• Choose one option from roughly 5 to 15

Do not use it when

• Fewer than 5 options (use Radio)
• Many options needing search (use Combobox)
• Several options can be chosen from a long list (use Multi Combobox)

Rules for agents

• Every Select has a visible label
• Pass native <option> children (and <optgroup> for groups); the open list is drawn by the browser
• Use placeholder when there is no sensible default, and make the field required if a choice is needed
• Order options logically (alphabetical, numeric or by frequency) and keep them to roughly 5 to 15

Avoid

• A Select with fewer than 5 options (use Radio so every choice is visible)
• A Select with a long list people need to search (use Combobox)
• Using a Select to trigger actions or navigation (use Dropdown Menu or links)
• Using the placeholder option as the label

Writing the content

• Labels are short nouns: 'Country', 'Role'
• Placeholders invite a choice: 'Choose a role'
• Option labels are short, parallel and in sentence case

Keyboard

• Space or Enter opens
• Arrow keys move
• Escape closes
• Type-ahead selects

Accessibility

• aria-expanded reflects Open
• aria-haspopup="listbox"
• aria-invalid in Error

Colour tokens it reads

Related

• Dropdown Menu
• Radio
• Text Field
• Multi Combobox

inputs 21 Figma variants Try it in the live demo