Select

When to use

Select is for choosing one option from a short closed list without typing: a view, a sort order, a category.

When not to use

• When there are two to four options and all should show: Use a radio group; the options read at a glance.
• For long lists: Lists over about 15 options need search; use a selection control with a search box.
• For several choices: Use a checkbox group.
• For an action menu: Select picks a value; it does not run actions.

Anatomy

Field labelChoose

Help text goes here.

LightDark

Copy code

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

const items = [
  { value: 'one', label: 'First option' },
  { value: 'two', label: 'Second option' },
  { value: 'three', label: 'Third option', disabled: true },
];

export default function Default() {
  return (
    <div className="max-w-80">
      <Select label="Field label" items={items} placeholder="Choose" description="Help text goes here." />
    </div>
  );
}

1. Label: the Field label, with the necessity marker when needed.
2. Trigger: the chosen value’s label or the placeholder, with a chevron icon at the end. It is as wide as its value; set fullWidth to fill the field, as in a form column.
3. List: a shadowed surface that opens below the trigger, at least as wide as the trigger.
4. Option: an optional icon, the label and, when chosen, a check mark. A { label, items } entry groups options under a heading, set apart by separators.
5. Help text and error: Field parts.

Behaviour

• Click, Enter, Space or the down arrow open the list; the chosen option is highlighted.
• While the list is open, typing a letter moves to the option whose label starts with it.
• Choosing an option closes the list and returns focus to the trigger.
• Escape closes the list without choosing.
• A disabled option shows but cannot be chosen. A readOnly field shows the value; the list does not open.
• The list opens above the trigger when there is no room below. When it scrolls, an arrow at the top or bottom edge scrolls it on hover.
• With multiple, Enter, Space or a click ticks or unticks an option and the list stays open. The trigger joins the chosen labels with the language’s list rules.

Guidelines

• Order the options meaningfully: by frequency, alphabet or size.
• Write the placeholder as an action: “Choose”.
• When a default value makes sense, set defaultValue; do not leave the user with an empty choice.
• Use icons only when they help tell options apart.

Content

• Option labels are short and in the same grammatical form.
• The error message says what to do: “Choose an option.”

Turkish	English
Seçin	Choose
Bir seçenek seçin.	Choose an option.

Glass

Under a Provider material="glass", the option list turns glass. The field itself is always solid. material="solid" keeps it solid.

Related components

• Field: binds label, help text and error.
• ToggleGroup: visible options that take effect at once.
• TextInput: free text entry.