Select
A select is a form input component that lets users choose one option from a predefined list.
ReactreleasedVuereleasedElementsreleased
A select supports various states (hover, active, filled, disabled, error) and enhances clarity with optional labels, help texts, and icons. It can be used in forms, filters, settings, and anywhere a single-choice dropdown is needed.
Related components: Text area, Text field.
Examples
Variants
Default
Standard select with a label, placeholder, and optional help text below. Use this variant in most cases, when clarity is important, and the field needs context both before (label) and after (help text) user interaction.s on mouse hover.
Label only
A select with a label above the field, with no help text. Use when space is limited or help text is not necessary. Ideal in short or repeated forms (e.g. settings, profile forms).
Text field only
A bare select with only a placeholder inside, and no label or help text. Use with extreme caution. Best suited for one-off interactions, short filters, or embedded in compact UI elements like toolbars, or filters.
Optional and info tooltip
A select with an optional label indicator (Optional) and/or an info icon that opens a tooltip. Use these when the field is not required, and/or users may need extra clarification on how to fill it in. The Optional label and the info tooltip are independent options, they can be enabled or disabled separately depending on the use case.
Anatomy
Select label (optional)
Select field
Optional indicator (optional)
Info tooltip (optional)
Placeholder
Help text (optional)
Right dropdown icon
Questions?
Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system