Skip to main content
On this page

Select Field

A form field for choosing a single option from a predefined list

When to use​

  • When the user needs to choose one option from a large, familiar set (typically seven or more options)
  • When the options are well known and the user does not need to read every item to make a choice, for example a list of countries or months
  • When you need to save screen space compared to a full list of radio buttons
  • When the options are mutually exclusive and only one can be selected

When not to use​

  • When there are fewer than seven options - use Radio instead, so users can see all choices at a glance without opening a dropdown.
  • When users need to read all the options to decide - use Radio or Combobox Field so the full list is visible.
  • When multiple selections are allowed - use Combobox Field, which supports multi-select.
  • When the user needs to search or filter options - use Combobox Field, which supports type-to-filter.
  • To indicate that a field is unavailable - the disabled state is not supported. Use Summary List to show values that cannot be edited, or conditionally hide the field if it is not relevant in the current context.

Anatomy​

  1. Label
  2. Hint
  3. Select input
  4. Chevron icon (indicates the field is interactive)
  5. Error message
  6. Required/Optional indicator

Basic usage​

Loading...
Edit live code
() => { // ignore - for live code example only.
  const Example = () => {
    const [selectValue, setSelectValue] = useState('wind');

    return (
      <SelectField
        id="energy"
        label="Select a renewable energy source?"
        value={selectValue}
        onValueChange={(newValue) =>
          newValue && setSelectValue(newValue)
        }
        options={[
          { value: 'solar', label: 'Solar' },
          { value: 'wind', label: 'Wind' }
        ]}
      />
    );
  }

  return <Example />;
}

Variants and features​

Options as a prop​

Pass an array of { value, label } objects to the options prop. This is the simplest approach for flat lists.

Loading...
Edit live code
<SelectField
  id="energy-2"
  label="Renewable energy source"
  options={[
    { value: 'solar', label: 'Solar' },
    { value: 'wind', label: 'Wind' },
    { value: 'hydro', label: 'Hydro' },
    { value: 'tidal', label: 'Tidal' },
    { value: 'geothermal', label: 'Geothermal' },
    { value: 'biomass', label: 'Biomass' },
  ]}
/>

Options as children​

Render native <option> and <optgroup> elements as children for grouped lists or when you need more control over option rendering. Both patterns can be combined.

Loading...
Edit live code
<SelectField id="meter-type" label="Meter type">
  <optgroup label="Standard">
    <option value="single">Single rate</option>
    <option value="economy7">Economy 7</option>
  </optgroup>
  <optgroup label="Smart">
    <option value="smets1">SMETS1</option>
    <option value="smets2">SMETS2</option>
  </optgroup>
</SelectField>

Option ordering​

Put the most commonly selected option first. Within groups of equally common options, use alphabetical order. Do not include a blank placeholder option such as "Select an option" to indicate the field is required. Use the required/optional indicator instead.

Common form features​

For validation, hint text, required/optional labelling, and field width, see the Form guidance. These features are shared across all Nebula form fields.

Grouping​

Select fields are typically part of a larger form. See the Form component and form guidelines for guidance on grouping and layout.