Select Field

Select Fields allow users to choose from a list of options.

Overview

Select Fields allow users to choose from a list of options. They can be used when a large number of familiar or predictable options are available. Select Fields require the user to click to reveal the options available to them, in many cases Radio Fields are a better option.

Usage

Select Fields can either be passed a list of options, or render options as children.


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 />;
}() => { // 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 />;
}

Content

Always put options in a logical order. Where appropriate, put the most common options at the top.
Never use Select Fields if you want users to read all of the options.

Variations

With options as children


Edit live code
<SelectField id="energy-2" label="Renewable Energy Sources">
  <optgroup label="Electricity">
    <option value="3">Solar</option>
    <option value="4">Wind</option>
    <option value="8">Hydro</option>
    <option value="11">Tidal</option>
    <option value="11">Geothermal</option>
    <option value="11">Biomass</option>
  </optgroup>
  <optgroup label="Gas">
    <option value="1">Biomethane</option>
  </optgroup>
</SelectField><SelectField id="energy-2" label="Renewable Energy Sources">
  <optgroup label="Electricity">
    <option value="3">Solar</option>
    <option value="4">Wind</option>
    <option value="8">Hydro</option>
    <option value="11">Tidal</option>
    <option value="11">Geothermal</option>
    <option value="11">Biomass</option>
  </optgroup>
  <optgroup label="Gas">
    <option value="1">Biomethane</option>
  </optgroup>
</SelectField>

Autocomplete

Browser autofill on this field is controlled by a transitional theme property. Learn how to enable it in your app.

Properties

Name	Values	Default
id (required)	String
label (required)	String
optional	Boolean	false
hint	ReactNode
error	ReactNode
characters	Number	25
fullWidth	alwaysneversmall	small
value (required)	String
options	{value: string; label: string;}[]
onValueChange(newValue) => null	Function
autoCompleteDefaults to "off" when the disableAutocomplete theme config flag is enabled (see the Theme guide); pass autoComplete to override for a specific field.	String
...	JSX.IntrinsicElements["select"]