Select examples

Show params

Params

params:
- name: id
  type: string
  required: true
  description: Id for each select box.
- name: name
  type: string
  required: true
  description: Name property for the select.
- name: items
  type: array
  required: true
  description: Array of option items for the select.
  params:
  - name: value
    type: string
    required: false
    description: Value for the option item.
  - name: text
    type: string
    required: true
    description: Text for the option item.
  - name: optgroup
    type: boolean
    required: false
    description: If true, there will be an optgroup with items.
  - name: optgroup.label
    type: string
    required: false
    description: Label for the optgroup.
  - name: optgroup.disabled
    type: boolean
    required: false
    description: If true, the optgroup will be disabled.
  - name: optgroup.items
    type: array
    required: false
    description: Provide subitems for the optgroup.
  - name: selected
    type: boolean
    required: false
    description: Sets the option as the selected.
  - name: disabled
    type: boolean
    required: false
    description: Sets the option item as disabled.
  - name: hidden
    type: boolean
    required: false
    description: Sets the option item as hidden.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the option.
- name: describedBy
  type: string
  required: false
  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
- name: label
  type: object
  required: false
  description: Label text or HTML by specifying value for either text or html keys.
  isComponent: true
- name: hint
  type: object
  required: false
  description: Options for the hint component.
  isComponent: true
- name: errorMessage
  type: object
  required: false
  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
  isComponent: true
- name: formGroup
  type: object
  required: false
  description: Options for the form-group wrapper
  params:
  - name: classes
    type: string
    required: false
    description: Classes to add to the form group (e.g. to show error state for the whole group)
- name: disabled
  type: boolean
  required: false
  description: If true, select will be disabled.
- name: classes
  type: string
  required: false
  description: Classes to add to the select.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the select.

default

Show code

Macro

{% from "components/select/_macro.select.njk" import componentSelect %}
{{ componentSelect({
  "id": "select-1",
  "name": "select-1",
  "label": {
    "text": "Label text goes here"
  },
  "items": [
    {
      "value": 1,
      "text": "Option 1"
    },
    {
      "value": 2,
      "text": "Option 2",
      "selected": true
    },
    {
      "value": 3,
      "text": "Option 3",
      "disabled": true
    }
  ]
})  }}

Markup

<!-- select -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="select-1">Label text goes here</label>
  
  <!-- /label -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="select-1" name="select-1">
        <option value="1">Option 1</option>
        <option value="2" selected>Option 2</option>
        <option value="3" disabled>Option 3</option>
  </select>
</div>
<!-- /select -->

disabled

Show code

Macro

{% from "components/select/_macro.select.njk" import componentSelect %}
{{ componentSelect({
  "id": "select-2",
  "name": "select-2",
  "disabled": true,
  "label": {
    "text": "Label text goes here"
  },
  "items": [
    {
      "value": 1,
      "text": "Option 1"
    },
    {
      "value": 2,
      "text": "Option 2",
      "selected": true
    },
    {
      "value": 3,
      "text": "Option 3",
      "disabled": true
    }
  ]
})  }}

Markup

<!-- select -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="select-2">Label text goes here</label>
  
  <!-- /label -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="select-2" name="select-2" disabled>
        <option value="1">Option 1</option>
        <option value="2" selected>Option 2</option>
        <option value="3" disabled>Option 3</option>
  </select>
</div>
<!-- /select -->

placeholder

Use a combination of disabled, selected and hidden for the first option that acts as a visual placeholder

Show code

Macro

{% from "components/select/_macro.select.njk" import componentSelect %}
{{ componentSelect({
  "id": "select-placeholder",
  "name": "select-placeholder",
  "label": {
    "text": "Label text goes here"
  },
  "items": [
    {
      "value": "",
      "text": "Choose an option",
      "disabled": true,
      "selected": true,
      "hidden": true
    },
    {
      "value": 1,
      "text": "Option 1"
    },
    {
      "value": 2,
      "text": "Option 2"
    },
    {
      "value": 3,
      "text": "Option 3"
    }
  ]
})  }}

Markup

<!-- select -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="select-placeholder">Label text goes here</label>
  
  <!-- /label -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="select-placeholder" name="select-placeholder">
        <option value="" selected disabled hidden>Choose an option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
  </select>
</div>
<!-- /select -->

With optgroup

Show code

Macro

{% from "components/select/_macro.select.njk" import componentSelect %}
{{ componentSelect({
  "id": "select-optgroup",
  "name": "select-optgroup",
  "label": {
    "text": "Label text goes here"
  },
  "items": [
    {
      "value": 1,
      "text": "Option 1"
    },
    {
      "value": 2,
      "text": "Option 2"
    },
    {
      "optgroup": {
        "label": "Optgroup label A",
        "items": [
          {
            "value": 1,
            "text": "Optgroup suboption A1"
          },
          {
            "value": 2,
            "text": "Optgroup suboption A2",
            "selected": true
          },
          {
            "value": 3,
            "text": "Optgroup suboption A3"
          }
        ]
      }
    },
    {
      "value": 3,
      "text": "Option 3"
    },
    {
      "value": 4,
      "text": "Option 4"
    },
    {
      "optgroup": {
        "label": "Optgroup label B",
        "items": [
          {
            "value": 1,
            "text": "Optgroup suboption B1"
          },
          {
            "value": 2,
            "text": "Optgroup suboption B2"
          },
          {
            "value": 3,
            "text": "Optgroup suboption B3"
          }
        ]
      }
    },
    {
      "value": 5,
      "text": "Option 5"
    },
    {
      "value": 6,
      "text": "Option 6"
    }
  ]
})  }}

Markup

<!-- select -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="select-optgroup">Label text goes here</label>
  
  <!-- /label -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="select-optgroup" name="select-optgroup">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <optgroup label="Optgroup label A">
              <option value="1">Optgroup suboption A1</option>
              <option value="2" selected>Optgroup suboption A2</option>
              <option value="3">Optgroup suboption A3</option>
        </optgroup>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <optgroup label="Optgroup label B">
              <option value="1">Optgroup suboption B1</option>
              <option value="2">Optgroup suboption B2</option>
              <option value="3">Optgroup suboption B3</option>
        </optgroup>
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
  </select>
</div>
<!-- /select -->

with hint text and error message

Hint text goes here

Error: Error: Error message goes here

Show code

Macro

{% from "components/select/_macro.select.njk" import componentSelect %}
{{ componentSelect({
  "id": "select-3",
  "name": "select-3",
  "label": {
    "text": "Label text goes here"
  },
  "hint": {
    "text": "Hint text goes here"
  },
  "errorMessage": {
    "text": "Error: Error message goes here"
  },
  "items": [
    {
      "value": 1,
      "text": "Option 1"
    },
    {
      "value": 2,
      "text": "Option 2"
    },
    {
      "value": 3,
      "text": "Option 3"
    }
  ]
})  }}

Markup

<!-- select -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="select-3">Label text goes here</label>
  
  <!-- /label -->
  <!-- hint -->
  <p id="select-3-hint" class="block text-neutral-dark">
    Hint text goes here
  </p>
  <!-- /hint -->
  <!-- error-message -->
  <p id="select-3-error" class="block font-semibold text-alert-base">
  <span class="sr-only">Error:</span> Error: Error message goes here
  </p>
  <!-- /error-message -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--error border-alert-base ring-2 ring-alert-base " id="select-3" name="select-3" aria-describedby="select-3-hint select-3-error" aria-errorMessage="select-3-error" aria-invalid="true">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
  </select>
</div>
<!-- /select -->

with label as page heading

Show code

Macro

{% from "components/select/_macro.select.njk" import componentSelect %}
{{ componentSelect({
  "id": "select-4",
  "name": "select-4",
  "label": {
    "text": "Label text goes here",
    "isPageHeading": true
  },
  "items": [
    {
      "value": 1,
      "text": "Option 1"
    },
    {
      "value": 2,
      "text": "Option 2",
      "selected": true
    },
    {
      "value": 3,
      "text": "Option 3",
      "disabled": true
    }
  ]
})  }}

Markup

<!-- select -->
<div class="c-form-group">
  <!-- label -->
      <h1 class="block "><label class="block" for="select-4">Label text goes here</label>
    </h1>
  <!-- /label -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="select-4" name="select-4">
        <option value="1">Option 1</option>
        <option value="2" selected>Option 2</option>
        <option value="3" disabled>Option 3</option>
  </select>
</div>
<!-- /select -->

with full width override

Show code

Macro

{% from "components/select/_macro.select.njk" import componentSelect %}
{{ componentSelect({
  "id": "select-5",
  "name": "select-5",
  "classes": "w-full",
  "label": {
    "text": "Label text goes here"
  },
  "items": [
    {
      "value": 1,
      "text": "Option 1"
    },
    {
      "value": 2,
      "text": "Option 2",
      "selected": true
    },
    {
      "value": 3,
      "text": "Option 3",
      "disabled": true
    }
  ]
})  }}

Markup

<!-- select -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="select-5">Label text goes here</label>
  
  <!-- /label -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base w-full" id="select-5" name="select-5">
        <option value="1">Option 1</option>
        <option value="2" selected>Option 2</option>
        <option value="3" disabled>Option 3</option>
  </select>
</div>
<!-- /select -->

with optional form-group classes

Inline label + flexible select and error message

Error: Error: Error message goes here

Show code

Macro

{% from "components/select/_macro.select.njk" import componentSelect %}
{{ componentSelect({
  "id": "select-6",
  "name": "select-6",
  "classes": "lg:flex-1",
  "label": {
    "text": "Inline label:",
    "classes": "lg:py-sm lg:mt-sm"
  },
  "formGroup": {
    "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
  },
  "errorMessage": {
    "text": "Error: Error message goes here",
    "classes": "order-1 w-full pt-sm"
  },
  "items": [
    {
      "value": 1,
      "text": "Option 1"
    },
    {
      "value": 2,
      "text": "Option 2",
      "selected": true
    },
    {
      "value": 3,
      "text": "Option 3",
      "disabled": true
    }
  ]
})  }}

Markup

<!-- select -->
<div class="c-form-group c-form-group--error lg:flex lg:flex-wrap lg:items-center lg:gap-x-base">
  <!-- label -->
  <label class="block lg:py-sm lg:mt-sm" for="select-6">Inline label:</label>
  
  <!-- /label -->
  <!-- error-message -->
  <p id="select-6-error" class="block font-semibold text-alert-base order-1 w-full pt-sm">
  <span class="sr-only">Error:</span> Error: Error message goes here
  </p>
  <!-- /error-message -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base lg:flex-1 c-select--error border-alert-base ring-2 ring-alert-base " id="select-6" name="select-6" aria-describedby="select-6-error" aria-errorMessage="select-6-error" aria-invalid="true">
        <option value="1">Option 1</option>
        <option value="2" selected>Option 2</option>
        <option value="3" disabled>Option 3</option>
  </select>
</div>
<!-- /select -->

transparent

Show code

Macro

{% from "components/select/_macro.select.njk" import componentSelect %}
{{ componentSelect({
  "id": "select-7",
  "name": "select-7",
  "classes": "c-select--transparent",
  "label": {
    "text": "Label text goes here"
  },
  "items": [
    {
      "value": 1,
      "text": "Option 1"
    },
    {
      "value": 2,
      "text": "Option 2",
      "selected": true
    },
    {
      "value": 3,
      "text": "Option 3",
      "disabled": true
    }
  ]
})  }}

Markup

<!-- select -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="select-7">Label text goes here</label>
  
  <!-- /label -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--transparent" id="select-7" name="select-7">
        <option value="1">Option 1</option>
        <option value="2" selected>Option 2</option>
        <option value="3" disabled>Option 3</option>
  </select>
</div>
<!-- /select -->

small

Show code

Macro

{% from "components/select/_macro.select.njk" import componentSelect %}
{{ componentSelect({
  "id": "select-8",
  "name": "select-8",
  "classes": "c-select--sm",
  "label": {
    "text": "Label text goes here"
  },
  "items": [
    {
      "value": 1,
      "text": "Option 1"
    },
    {
      "value": 2,
      "text": "Option 2",
      "selected": true
    },
    {
      "value": 3,
      "text": "Option 3",
      "disabled": true
    }
  ]
})  }}

Markup

<!-- select -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="select-8">Label text goes here</label>
  
  <!-- /label -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--sm" id="select-8" name="select-8">
        <option value="1">Option 1</option>
        <option value="2" selected>Option 2</option>
        <option value="3" disabled>Option 3</option>
  </select>
</div>
<!-- /select -->