💠 Select

Displays a list of options for the user to pick from—triggered by a button.

Usage

The Select component presents a list of options from which the user can select a single item. It's commonly used in forms and filters as a compact, clean method to offer choices without displaying all options at once.

When the user interacts with the Select trigger, typically a button or input-like field, a dropdown menu appears with the available options.

When to use

• Space-saving choice lists: Use a Select when you need to present multiple options in a limited space. It keeps the interface clean and uncluttered.
• Reducing visual complexity: Employ a Select to reduce visual complexity on forms or filters where showing all available options at once would overwhelm the user.
• Simplified navigation: Utilize a Select for simplified navigation through long lists by grouping choices in a scrollable dropdown, making it easier for users to find and select their preferred option.
• Form input: A Select is ideal for form input where users are required to choose from a list of predefined options, such as selecting a country from a list in an address form.

Avoid using Select components for very short lists where radio buttons or toggle switches might be more appropriate. Also, refrain from using them for actions or navigation, as this can be confusing. Select components should not be overstyled to the point where their functionality is not immediately apparent to users.

Examples

Default

Scrollable

With form

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:

Accessibility

Adheres to the ListBox WAI-ARIA design pattern (opens in a new tab).

See the W3C Select-Only Combobox (opens in a new tab) example for more information.

Keyboard interactions

Labelling

Use our Label (opens in a new tab) component in order to offer a visual and accessible label for the select.

import { Select } from "@fusillo/ui/components/select";
import { Label } from "@fusillo/ui/components/label";
 
export default () => (
  <>
    <Label htmlFor="country">Country</Label>
    <Select>
      <SelectTrigger id="country">…</SelectTrigger>
      <SelectPortal>
        <SelectContent>…</SelectContent>
      </SelectPortal>
    </Select>
  </>
);