title: "Select" slug: "/packages/select" category: "control" componentNames:

• "Select"

Select

The Select component is a wrapper around the select tag. It uses the native browser select under the hood. The Select component allows users to select one item from a limited number of choices (ideally up to 15).

To see the select in action, check out the visualization controls patterns.

import Select from "@ds-kit/select"

Basic Example

<Select
  mb="7rem"
  defaultValue="1"
  options={[
    { value: "1", label: "Option 1" },
    { value: "2", label: "Option 2" },
    { value: "3", label: "Option 3" },
  ]}
/>

Sizes

<Div pb="7rem">
  <Select
    size="sm"
    label="select-sm"
    defaultValue="1"
    options={[
      { value: "1", label: "Option 1" },
      { value: "2", label: "Option 2" },
      { value: "3", label: "Option 3" },
    ]}
    mr="0.5rem"
  />
  <Select
    size="md"
    label="select-md"
    defaultValue="1"
    options={[
      { value: "1", label: "Option 1" },
      { value: "2", label: "Option 2" },
      { value: "3", label: "Option 3" },
    ]}
    mr="0.5rem"
  />
  <Select
    size="lg"
    label="select-lg"
    defaultValue="1"
    options={[
      { value: "1", label: "Option 1" },
      { value: "2", label: "Option 2" },
      { value: "3", label: "Option 3" },
    ]}
  />
</Div>

Controlled Select

class Sample extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      selected: "1",
    }
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange({ target }) {
    this.setState({ selected: target.value })
  }
  render() {
    return (
      <div>
        <Select
          value={this.state.selected}
          onChange={this.handleChange}
          options={[
            { value: "1", label: "Option 1" },
            { value: "2", label: "Option 2" },
            { value: "3", label: "Option 3" },
          ]}
        />
      </div>
    )
  }
}

Custom colors

<Select
  defaultValue="1"
  options={[
    { value: "1", label: "Option 1" },
    { value: "2", label: "Option 2" },
    { value: "3", label: "Option 3" },
  ]}
  bg="green.400"
  bgHover="green.500"
  color="white"
  colorHover="white"
/>