Select

An HTML element, typically used in a form.

Examples

View in Pajamas UI Kit →

Structure

TODO:
Add structure image. Create an issue

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

TODO:
Add appearance. Create an issue

Behavior

TODO:
Add behavior. Create an issue

Accessibility

  • When using GlFormGroup, the label 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: