SelectInput

A general purpose select input field that is used with controlled state manangement.

API Reference

Prop	Type	Default
onChange	React.ChangeEventHandler<HTMLSelectElement>
name	string
children	React.ReactNode
data-test	string
description	string
disabled	boolean	false
errorMessage	string
id	string
isEmpty	(value: string \| number) => boolean
isValid	boolean	true
label	string
loading	boolean
mode	'compact'
onBlur	React.FocusEventHandler<HTMLSelectElement>
onFocus	React.FocusEventHandler<HTMLSelectElement>
required	boolean	false
type	default \| info \| success \| warning \| destructive	default
value	string \| number

Examples

Dark Mode

function Example() {
  const [value, setValue] = React.useState('')

  return (
    <SelectInput
      name="brand"
      label="Brand"
      value={value}
      onChange={(event) => setValue(event.target.value)}>
      <option value="" />
      <option value="mercedes">Mercedes</option>
      <option value="volvo">Volvo</option>
      <option value="audi">Audi</option>
      <option value="skoda">Skoda</option>
    </SelectInput>
  )
}

Description & Error Message

Dark Mode
Open in Playroom

Disabled

Dark Mode
Open in Playroom

Loading

Dark Mode
Open in Playroom

isEmpty

Dark Mode

function Example() {
  const [value, setValue] = React.useState('-1')

  return (
    <SelectInput
      name="brand-2"
      label="Brand"
      value={value}
      onChange={(event) => setValue(event.target.value)}
      isEmpty={(value) => value === '-1'}>
      <option value="-1" disabled hidden>
        Placeholder
      </option>
      <option value="mercedes">Mercedes</option>
      <option value="volvo">Volvo</option>
      <option value="audi">Audi</option>
      <option value="skoda">Skoda</option>
    </SelectInput>
  )
}

Unabelled

Dark Mode
Open in Playroom

Compact Mode

Dark Mode

function Example() {
  const [value, setValue] = React.useState('')

  return (
    <SelectInput
      name="country"
      mode="compact"
      label="Country"
      value={value}
      onChange={(event) => setValue(event.target.value)}>
      <option value="" />
      <option value="germany">Germany</option>
      <option value="sweden">Sweden</option>
      <option value="norway">Norway</option>
    </SelectInput>
  )
}

Color Coding

Dark Mode
Open in Playroom

<Box space={4}>
  <SelectInput name="default" label="Default" onChange={() => null}>
    <option value="" />
    <option value="TODO">Todo</option>
    <option value="IN_PROGRESS">In progress</option>
    <option value="CANCELED">Canceled</option>
    <option value="DONE">Done</option>
  </SelectInput>
  <SelectInput
    name="warning"
    label="Warning"
    type="warning"
    value="TODO"
    onChange={() => null}>
    <option value="" />
    <option value="TODO">Todo</option>
    <option value="IN_PROGRESS">In progress</option>
    <option value="CANCELED">Canceled</option>
    <option value="DONE">Done</option>
  </SelectInput>
  <SelectInput
    name="info"
    label="Info"
    type="info"
    value="IN_PROGRESS"
    onChange={() => null}>
    <option value="" />
    <option value="TODO">Todo</option>
    <option value="IN_PROGRESS">In progress</option>
    <option value="CANCELED">Canceled</option>
    <option value="DONE">Done</option>
  </SelectInput>
  <SelectInput
    name="destructive"
    label="Destructive"
    type="destructive"
    value="CANCELED"
    onChange={() => null}>
    <option value="" />
    <option value="TODO">Todo</option>
    <option value="IN_PROGRESS">In progress</option>
    <option value="CANCELED">Canceled</option>
    <option value="DONE">Done</option>
  </SelectInput>
  <SelectInput
    name="success"
    label="Success"
    type="success"
    value="DONE"
    onChange={() => null}>
    <option value="" />
    <option value="TODO">Todo</option>
    <option value="IN_PROGRESS">In progress</option>
    <option value="CANCELED">Canceled</option>
    <option value="DONE">Done</option>
  </SelectInput>
</Box>