SelectInput

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

Props

Name	Type	Default	Description
onChange*	func		The change event handler. Function signature is `(newValue, event) => handler`
name*	string		A unique semantic name that is connected to the label
children	node		The select options
description	string		Additional description information display beneath the input
disabled	bool		Sets disabled
errorMessage	string		An error message text that is displayed once isValid is false
isEmpty	func		A function that takes the value and returns a boolean that indicates an empty state
isValid	bool		Sets the validation state
label	string		The label text
loading	bool		Whether the input is loading
mode	compact
onBlur	func		The bur event handler
onFocus	func		The focus event handler
required	bool		Sets required
type	default \| success \| warning \| destructive \| info	default	colors to use for fore- and background
value	string, number		The controlled value

Examples

Dark Mode

function Example() {
  const brand = useField({ name: 'brand' })
  return (
    <SelectInput label="Brand" {...brand.props}>
      <option value="" />
      <option value="mercedes">Mercedes</option>
      <option value="volvo">Volvo</option>
      <option value="audi">Audi</option>
      <option value="skoda">Skoda</option>
    </SelectInput>
  )
}function Example() {
  const brand = useField({ name: 'brand' })
  return (
    <SelectInput label="Brand" {...brand.props}>
      <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

<SelectInput
  name="brand"
  label="Brand"
  isValid={false}
  description="Please choose a car brand."
  errorMessage="You must choose a brand."
  onChange={() => {
    /*noop*/
  }}>
  <option value="" />
  <option value="mercedes">Mercedes</option>
  <option value="volvo">Volvo</option>
  <option value="audi">Audi</option>
  <option value="skoda">Skoda</option>
</SelectInput><SelectInput
  name="brand"
  label="Brand"
  isValid={false}
  description="Please choose a car brand."
  errorMessage="You must choose a brand."
  onChange={() => {
    /*noop*/
  }}>
  <option value="" />
  <option value="mercedes">Mercedes</option>
  <option value="volvo">Volvo</option>
  <option value="audi">Audi</option>
  <option value="skoda">Skoda</option>
</SelectInput>

Disabled

Dark Mode
Open in Playroom

<SelectInput
  disabled
  name="brand"
  label="Brand"
  value="audi"
  onChange={() => null}>
  <option value="mercedes">Mercedes</option>
  <option value="volvo">Volvo</option>
  <option value="audi">Audi</option>
  <option value="skoda">Skoda</option>
</SelectInput><SelectInput
  disabled
  name="brand"
  label="Brand"
  value="audi"
  onChange={() => null}>
  <option value="mercedes">Mercedes</option>
  <option value="volvo">Volvo</option>
  <option value="audi">Audi</option>
  <option value="skoda">Skoda</option>
</SelectInput>

Loading

Dark Mode
Open in Playroom

<SelectInput
  loading
  name="brand"
  label="Brand"
  value="audi"
  onChange={() => null}>
  <option value="mercedes">Mercedes</option>
  <option value="volvo">Volvo</option>
  <option value="audi">Audi</option>
  <option value="skoda">Skoda</option>
</SelectInput><SelectInput
  loading
  name="brand"
  label="Brand"
  value="audi"
  onChange={() => null}>
  <option value="mercedes">Mercedes</option>
  <option value="volvo">Volvo</option>
  <option value="audi">Audi</option>
  <option value="skoda">Skoda</option>
</SelectInput>

isEmpty

Dark Mode

function Example() {
  const brand = useField({ name: 'brand-2', value: -1 })

  return (
    <SelectInput
      label="Brand"
      {...brand.props}
      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>
  )
}function Example() {
  const brand = useField({ name: 'brand-2', value: -1 })

  return (
    <SelectInput
      label="Brand"
      {...brand.props}
      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

<SelectInput name="brand" onChange={() => null}>
  <option value="">Choose a brand</option>
  <option value="mercedes">Mercedes</option>
  <option value="volvo">Volvo</option>
  <option value="audi">Audi</option>
  <option value="skoda">Skoda</option>
</SelectInput><SelectInput name="brand" onChange={() => null}>
  <option value="">Choose a brand</option>
  <option value="mercedes">Mercedes</option>
  <option value="volvo">Volvo</option>
  <option value="audi">Audi</option>
  <option value="skoda">Skoda</option>
</SelectInput>

Compact Mode

Dark Mode

function Example() {
  const country = useField({ name: 'country' })

  return (
    <SelectInput mode="compact" label="Country" {...country.props}>
      <option value="" />
      <option value="germany">Germany</option>
      <option value="sweden">Sweden</option>
      <option value="norway">Norway</option>
    </SelectInput>
  )
}function Example() {
  const country = useField({ name: 'country' })

  return (
    <SelectInput mode="compact" label="Country" {...country.props}>
      <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><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>