Skip to content
Blueprint

Select

Select components are used to create a dropdown list of options.

<Select
  label="Label"
  name="example-1"
  options={[
    { value: null, label: '- Select -' },
    { value: 'option-a', label: 'Option A' },
    { value: 'option-b', label: 'Option B' },
    { value: 'option-c', label: 'Option C' },
  ]}
/>

API Reference

This component inherits from the Field Group component.

This component is based on the <select> element and can take in any additional HTML attributes through the use of the inputProps property. The following are the custom props that can be passed to the component.

Prop Type Default
name *
string —
label *
string —
options *
[{ value: string, label: string }] —
labelHidden
boolean false
sublabel
string —
instructions
string —
placeholder
string —
disabled
boolean false
required
boolean | "long" false
inputProps
HTMLAttributes<select> —
errorMessages
string[] —

Accessibility

The <Select> component is designed with accessibility in mind and extends much of the accessibility features from the <Field Group> component. The following are some of the field specific accessibility features that are included in the component and worth considering:

  • The aria-labelledby attribute is used to associate the label and instructions elements with the input field. This is an important consideration specifically for the instructions so that they are read out by screen readers when the field is focused, rather than after the input field.

Examples

Required

Use the required prop to mark a field as required. You can also use the required prop to mark a field as required and include explicit “required” text by passing the value "long".

<Select
  label="Label"
  name="example-2"
  options={[
    { value: null, label: '- Select -' },
    { value: 'option-a', label: 'Option A' },
    { value: 'option-b', label: 'Option B' },
    { value: 'option-c', label: 'Option C' },
  ]}
  required
/>
<Select
  label="Label"
  name="example-3"
  options={[
    { value: null, label: '- Select -' },
    { value: 'option-a', label: 'Option A' },
    { value: 'option-b', label: 'Option B' },
    { value: 'option-c', label: 'Option C' },
  ]}
  required="long"
/>

Disabled

Use the disabled prop to disable the select.

<Select
  label="Label"
  name="example-4"
  options={[
    { value: null, label: '- Select -' },
    { value: 'option-a', label: 'Option A' },
    { value: 'option-b', label: 'Option B' },
    { value: 'option-c', label: 'Option C' },
  ]}
  disabled
/>

With Helper Text

Use the sublabel and instructions props to add helper text to the select.

Instructions lorem ipsum dolor. 
<Select
  label="Label"
  name="example-5"
  options={[
    { value: null, label: '- Select -' },
    { value: 'option-a', label: 'Option A' },
    { value: 'option-b', label: 'Option B' },
    { value: 'option-c', label: 'Option C' },
  ]}
  sublabel="Sublabel lorem ipsum dolor sit amet."
  instructions="Instructions lorem ipsum dolor."
/>

With Errors

Use the errorMessages prop to display error messages below the select.

  • Error message 1
  • Error message 2
<Select
  label="Label"
  name="example-6"
  options={[
    { value: null, label: '- Select -' },
    { value: 'option-a', label: 'Option A' },
    { value: 'option-b', label: 'Option B' },
    { value: 'option-c', label: 'Option C' },
  ]}
  errorMessages={['Error message 1', 'Error message 2']}
/>

With Hidden Label

Use the labelHidden prop to visually hide the label. When hidden, the label will still be available to screen readers.

<Select
  label="Label"
  name="example-6"
  options={[
    { value: null, label: '- Select -' },
    { value: 'option-a', label: 'Option A' },
    { value: 'option-b', label: 'Option B' },
    { value: 'option-c', label: 'Option C' },
  ]}
  labelHidden
/>

Astro Component

It’s recommended that an element like this is made as a reusable component. In this case, we have put together the following Astro component to serve as a blueprint for how you could possibly set up a select component, and what properties to consider.

Select.astro
---
import type { ComponentProps, HTMLAttributes } from 'astro/types'
import FieldGroup from '@/components/forms/FieldGroup.astro'


interface Props extends ComponentProps<typeof FieldGroup> {
  /**
    The array of options to display in the dropdown
  */
  options: [{ label: string; value: string }]
  /**
   Whether the input field is disabled or not
  */
  disabled?: boolean
  /**
   Additional props to pass into the input field
  */
  inputProps?: HTMLAttributes<'select'>
}


const {
  options,
  disabled = false,
  inputProps,
  ...fieldGroupProps
} = Astro.props
---


<FieldGroup data-component="Select" {...fieldGroupProps}>
  <select
    id={fieldGroupProps.name}
    name={`input-${fieldGroupProps.name}`}
    disabled={disabled}
    required={fieldGroupProps.required === true ||
      fieldGroupProps.required === 'long'}
    aria-labelledby={`label-${fieldGroupProps.name}${
      fieldGroupProps.instructions
        ? ` instructions-${fieldGroupProps.name}`
        : ''
    }`}
    {...inputProps}
  >
    {
      options.map((option) => (
        <option value={option.value}>{option.label}</option>
      ))
    }
  </select>
</FieldGroup>