Selects
A select is a form element that allows users to choose one option from a dropdown list.
Overview
Use selects with input group containers to present a menu of options for single selection. You can also use selects for form fields or single selection filters, such as in a filter row.
- For filters requiring multiple selections, use a filter or multi-select component. See the respective component pages for guidelines on when and how to use these components.
- Form fields:
- For form fields with five options or fewer, use a radio button group instead of a select.
- For form fields requiring multiple selections, use a multi-select component. If a question has five options or fewer, use a checkbox group instead of a multi-select.
Selects come in two sizes: small and medium, with medium being the default. The ['medium'] size has a tablet/mobile breakpoint of 1024 px. On tablet and mobile screens, it will shrink to better fit the limited content area while still retaining a large touch target area. Use ['small'] selects only with specific components, such as data tables.
Design and Layout
Style Variations
Selects have different colors, effects, and line weights depending on their state. These differences provide visual feedback to users and enhance usability.
| STATE | EXAMPLE |
|---|---|
| Default |  |
| Focus |  |
| Error |  |
| Disabled |  |
Installation
Props
No records available |
Events
No records available |