Alternatives

Autocomplete — Presents a filtered list only when the user has provided input. For extremely large datasets, where browsing the complete list would be inappropriate.
Combobox — Allows the user to browse, search, and make a single selection from a large list of values.

Usage

Label

Each select input must be accompanied by a Field with a label. Effective form labeling helps inform users which selection to make.

Edit in Playroom

const [value, setValue] = React.useState('full-time');
return (
  <Field label="Employment type">
    <SelectInput
      onChange={setValue}
      value={value}
      placeholder="Please select"
      options={[
        { value: 'full-time', label: 'Full time' },
        { value: 'part-time', label: 'Part time' },
      ]}
    />
  </Field>
);

Controlled

The SelectInput is a controlled component, which means you must provide value and onChange properties to "make it work".

Edit in Playroom

const [value, setValue] = useState();
return (
  <Field label="Employment type">
    <SelectInput
      onChange={setValue}
      value={value}
      placeholder="Please select"
      options={[
        { value: 'full-time', label: 'Full time' },
        { value: 'part-time', label: 'Part time' },
      ]}
    />
  </Field>
);

Placeholder

You must provide placeholder text when the input does not have an initial value.

Edit in Playroom

const options = [
  { value: 'apple', label: 'Apple' },
  { value: 'orange', label: 'Orange' },
  { value: 'banana', label: 'Banana' },
];
const [valueWithPlaceholder, setValueWithPlaceholder] = useState();
const [value, setValue] = useState(options[0].value);
return (
  <Stack gap="large">
    <Field label="With placeholder">
      <SelectInput
        onChange={setValueWithPlaceholder}
        options={options}
        value={valueWithPlaceholder}
        placeholder="Please select"
      />
    </Field>
    <Field label="No placeholder + initial value">
      <SelectInput onChange={setValue} options={options} value={value} />
    </Field>
  </Stack>
);

Disabled

You can disable individual options, or the entire select.

Edit in Playroom

const options = [
  { value: 'apple', label: 'Apple' },
  { value: 'orange', label: 'Orange', disabled: true },
  { value: 'banana', label: 'Banana' },
];
const [value, setValue] = useState(options[0].value);
return (
  <Stack gap="large">
    <Field label="Disabeld input">
      <SelectInput
        disabled
        onChange={setValue}
        options={options}
        value="orange"
      />
    </Field>
    <Field label="Disabled option">
      <SelectInput onChange={setValue} options={options} value={value} />
    </Field>
  </Stack>
);

Groups

Group related options together, uses the optgroup element internally.

Edit in Playroom

const [value, setValue] = React.useState('tyrannosaurus');
return (
  <Field label="Grouped dinosaurs">
    <SelectInput
      onChange={setValue}
      value={value}
      options={[
        {
          label: 'Theropods',
          options: [
            { value: 'tyrannosaurus', label: 'Tyrannosaurus' },
            { value: 'velociraptor', label: 'Velociraptor' },
            { value: 'deinonychus', label: 'Deinonychus' },
          ],
        },
        {
          label: 'Sauropods',
          options: [
            { value: 'diplodocus', label: 'Diplodocus' },
            { value: 'saltasaurus', label: 'Saltasaurus' },
            { value: 'apatosaurus', label: 'Apatosaurus' },
          ],
        },
      ]}
    />
  </Field>
);

Select Input

Usage

Label

Controlled

Placeholder

Disabled

Groups