components

Select (design)

Select gives users the ability to select a single item from a list of options.

Usage

A select is usually used in forms. It's best utilized in a case when a user has more than four options to choose from.

Always order the list of options in a logical order (eg. alphabetically, numerically)
Try to select a default value
If there's no logical default, try to use a clear placeholder text.

Behaviour

The selection menu, with a list of possible options, can be triggered by clicking into the text input field. A user can then select a single option after which the text input field updates to show the selected option.

Which option do you want?

I always have at least 4 available options

import { Select } from '@mediahuis/chameleon-react'

() => {
  const options = ['Option1', 'Option2', 'Option3', 'Option4'];
  const [value, setValue] = React.useState('');

  return (
    <Select
      id="mySelect"
      value={value}
      placeholder="Make a selection..."
      onChange={e => setValue(e.target.value)}
      label="Which option do you want?"
      message="I always have at least 4 available options"
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

() => {
  const options = ['Option1', 'Option2', 'Option3', 'Option4'];
  const [value, setValue] = React.useState('');
  return (
    <Select
      id="mySelect"
      value={value}
      placeholder="Make a selection..."
      onChange={e => setValue(e.target.value)}
      label="Which option do you want?"
      message="I always have at least 4 available options"
    >
      {options.map(option => (
        <option key={option} value={option}>
          {option}
        </option>
      ))}
    </Select>
  );
};

Guidelines

A select should be used in cases where there are more than 4 options
Always try to select a default option when possible

When a user has to make a single selection from less than 4 options, use the radio component or choice radio.

Select (design)

Usage

Behaviour

Guidelines

Related components