Select
An HTML element, typically used in a form.
Examples
Structure
Guidelines
When to use
- To indicate a selection of a single item from a list of options.
- To present sort options when the sort order button isn't required (see the sorting component for a comparison).
When not to use
- If there are five or less options to select from or the user needs to easily see all of options, then consider using radio buttons instead.
- If more than one option can be selected, consider using checkboxes instead.
- If the option is a binary decision that takes immediate effect, consider using a toggle instead.
- If selecting from a list of options outside of a form or for more complex interactions, then a combobox is preferred.
Appearance
Behavior
Accessibility
- When using
GlFormGroup
, thelabel
prop alone does not give the input an accessible name. - The
label-for
prop must also be provided to give the input an accessible name.
Select with label
<gl-form-group :label="__('Issue status')" label-for="issue-status">
<gl-form-select id="issue-status" v-model="status" :options="options" />
</gl-form-group>
Select with hidden label
<gl-form-group :label="__('Issue status')" label-for="issue-status" label-sr-only>
<gl-form-select id="issue-status" v-model="status" :options="options" />
</gl-form-group>
Last updated at: