Select
Input field with multiple options in a dropdown
Introduction
A select component lets users choose one option from a list of predefined choices. It's commonly used for country pickers, settings, categories, and more. Not to be confused with the Dropdown component which is used for navigation and action items.
Variants
- Basic select: Standard select component for choosing one option from a list.
- Multi-select: Select component that allows users to choose multiple options from a list.
Interactive demo
Try the interactive demo below to explore the select component.
Best practices
Here are some best practices on how to use the select component
Use when you have 5-15 options to select from, and user must select one (or more) options from a predefined list.
When you have fewer than 5 options, consider using radio buttons or checkboxes instead.
Anatomy
- Label: Descriptive text that indicates the purpose of the input field.
- Description: Additional context or instructions for the input field.
- Value: The selected option value.
- Placeholder: A hint that describes the expected value of the input field.
- Optional/required: A text that tells if the input field is optional/required.
- Feedback: A message that provides feedback to the user about their input.
- Clearable: An optional feature that allows users to clear the input field with a single click.
- Small: A reduced height version of the select input.
- Loading: Displays a loading spinner on the right hand side of the input.
Select in components
Select can be used within various components. See the links below for more information on how select can be integrated with these components.