Home Original page

Select | Pajamas Design System

Examples

<gl-form-select
  value=""
  :options="[
    { value: '', text: 'Please select an option', disabled: true },
    { value: 'pizza', text: 'Pizza' },
    { value: 'burger', text: 'Burger' },
    { value: 'pasta', text: 'Pasta' }
  ]"
/>

In form group

<gl-form-group label="Select" label-for="select-form-group">
  <gl-form-select
    id="select-form-group"
    value=""
    :options="[
      { value: '', text: 'Please select an option', disabled: true },
      { value: 'pizza', text: 'Pizza' },
      { value: 'burger', text: 'Burger' },
      { value: 'pasta', text: 'Pasta' }
    ]"
  />
</gl-form-group>

View in Pajamas UI Kit →

Structure

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

Add appearance. Create an issue

Behavior

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

<script>
  export default {
    data() {
      return {
        options: [
          { value: '', text: 'Please select an option', disabled: true },
          { value: 'option-1', text: 'Option 1' },
          { value: 'option-2', text: 'Option 2' },
          { value: 'option-3', text: 'Option 3' },
        ],
        selected: null,
      };
    },
  };
</script>

<template>
  <gl-form-group label="Issue status" label-for="issue-status">
    <gl-form-select id="issue-status" v-model="selected" :options="options" />
  </gl-form-group>
</template>

Select with hidden label

<script>
  export default {
    data() {
      return {
        options: [
          { value: '', text: 'Please select an option', disabled: true },
          { value: 'option-1', text: 'Option 1' },
          { value: 'option-2', text: 'Option 2' },
          { value: 'option-3', text: 'Option 3' },
        ],
        selected: null,
      };
    },
  };
</script>

<template>
  <gl-form-group label="Issue status" label-for="issue-status" label-sr-only>
    <gl-form-select id="issue-status" v-model="selected" :options="options" />
  </gl-form-group>
</template>

Code reference

GlFormSelect