Usage

Selects allow users to select an option from a menu of pre-defined choices. A select is best utilized when there are more than four choices.

Best Practices

Live Editor

function SelectUsageExample() {
  return (
    <FormField
      label='Choose your country'
      helperText="We'll use this information to determine if our service is available in your region."
    >
      {
        props =>
        <Select defaultValue='united states' id='countrySelect' name='country select'>
          <option value='brazil'>Brazil</option>
          <option value='france'>France</option>
          <option value='germany'>Germany</option>
          <option value='mexico'>Mexico</option>
          <option value='united states'>United States of America</option>
          <option value='united kingdom'>United Kingdom</option>
        </Select>
      }
    </FormField>
  );
}

• Selects should typically contain four or more items.
• If using a label and helper text, limit the respective text to a single line.
• Sort options in a logical order.
• If possible, set a default option.
• Use a placeholder if a default option doesn't make sense, such as "Select an option..."