Select

Select displays multiple options for a user to pick from in a dropdown menu. User selects one option.

Summary

Default

import React from 'react'

import { Select } from 'playbook-ui'

const SelectDefault = (props) => {
  const options = [
    {
      value: '1',
      text: 'Burgers',
    },
    {
      value: '2',
      text: 'Pizza',
    },
    {
      value: '3',
      text: 'Tacos',
    },
  ]

  return (
    <div>
      <Select
          label="Favorite Food"
          name="food"
          options={options}
      />
    </div>
  )
}

export default SelectDefault

Blank Selection Text

import React from 'react'

import { Select } from 'playbook-ui'

const SelectBlank = (props) => {
  const options = [
    { value: 'USA' },
    { value: 'Canada' },
    { value: 'Brazil' },
    { value: 'Philippines' },
  ]

  return (
    <div>
      <Select
          blankSelection="Select One..."
          label="Where do you live"
          name="location"
          options={options}
      />
    </div>
  )
}

export default SelectBlank

Disabled Options

import React from 'react'

import { Select } from 'playbook-ui'

const SelectDisabledOptions = (props) => {
  const options = [
    {
      value: '1',
      disabled: true,
      text: 'Espresso',
    },
    {
      value: '2',
      text: 'Americano',
    },
    {
      value: '3',
      disabled: true,
      text: 'Cappuccino',
    },
    {
      value: '4',
      text: 'Mocha',
    },
    {
      value: '5',
      text: 'Flat White',
    },
    {
      value: '6',
      text: 'Latte',
    },
  ]

  return (
    <div>
      <Select
          label="Favorite Coffee"
          name="coffee"
          options={options}
          value="2"
      />
    </div>
  )
}

export default SelectDisabledOptions

Disabled Select Field

import React from 'react'

import { Select } from 'playbook-ui'

const SelectDisabled = (props) => {
  const options = [
    { value: 'Apple Pie' },
    { value: 'Cookies' },
    { value: 'Ice Cream' },
    { value: 'Brownies' },
  ]

  return (
    <div>
      <Select
          disabled
          label="Favorite Dessert"
          name="dessert"
          options={options}
      />
    </div>
  )
}

export default SelectDisabled

Required Select Field

import React from 'react'

import { Select } from 'playbook-ui'

const SelectRequired = (props) => {
  const options = [
    { value: 'Left' },
    { value: 'Right' },
    { value: 'I go without laces' },
  ]

  return (
    <div>
      <Select
          blankSelection="Select One..."
          label="Which shoe do you tie first?"
          name="shoe"
          options={options}
          required
      />
    </div>
  )
}

export default SelectRequired

Equal option value and value text

import React from 'react'

import { Select } from 'playbook-ui'

const SelectValueTextSame = (props) => {
  const options = [
    { value: 'Football' },
    { value: 'Baseball' },
    { value: 'Basketball' },
    { value: 'Hockey' },
  ]

  return (
    <div>
      <Select
          label="Favorite Sport"
          name="sports"
          options={options}
      />
    </div>
  )
}

export default SelectValueTextSame

Custom Select

import React from 'react'

import { Select } from 'playbook-ui'

const SelectCustomSelect = (props) => {
  return (
    <div>
      <Select
          label="Favorite Holiday"
      >
        <select
            id="holiday"
            name="holiday"
        >
          <option value="1">{'Christmas'}</option>
          <option value="2">{'Thanksgiving'}</option>
          <option value="3">{'Halloween'}</option>
          <option value="4">{'Fourth of July'}</option>
        </select>
      </Select>
    </div>
  )
}

export default SelectCustomSelect

Custom Select Subheaders

To create a select with non-selectable subheaders, use a Custom Select component to render a native <select> containing <optgroup> elements. The optgroup HTML element groups related options under a non-selectable label in the dropdown.

import React from 'react'

import { Select } from 'playbook-ui'

const SelectCustomSelectSubheaders = (props) => {
  return (
    <div>
      <Select
          label="Favorite Animal"
      >
        <select
            id="animal"
            name="animal"
        >
          <optgroup label="Mammal">
            <option value="1">{'Cat'}</option>
            <option value="2">{'Dog'}</option>
          </optgroup>
          <optgroup label="Amphibian">
            <option value="3">{'Frog'}</option>
            <option value="4">{'Salamander'}</option>
          </optgroup>
        </select>
      </Select>
    </div>
  )
}

export default SelectCustomSelectSubheaders

Select w/ Error

Select w/ Error shows that an option must be selected or is invalid (i.e. when used in a form it signals a user to fix an error).

import React from 'react'

import { Body, Select, Icon } from 'playbook-ui'

const SelectError = (props) => {
  const options = [
    {
      value: '1',
      text: 'Burgers',
    },
    {
      value: '2',
      text: 'Pizza',
    },
    {
      value: '3',
      text: 'Tacos',
    },
  ]

  const error = (<>
    <Icon icon="warning" /> Please make a valid selection
  </>)

  return (
    <div>
      <Select
          error={error}
          label="Favorite Food"
          name="food"
          options={options}
          value="2"
      />
      <Body
          error={error}
          status="negative"
      />
    </div>
  )
}

export default SelectError

Select Inline

import React from 'react'

import { Body, Select } from 'playbook-ui'

const SelectInline = (props) => {
  const options = [
    {
      value: '1',
      text: 'Burgers',
    },
    {
      value: '2',
      text: 'Pizza',
    },
    {
      value: '3',
      text: 'Tacos',
    },
  ]

  return (
    <div>
      <Select
          inline
          label="Favorite Food"
          name="food"
          options={options}
      />
      <Body
          status="negative"
      />
    </div>
  )
}

export default SelectInline

Select Inline (Always Show Arrow)

import React from 'react'

import { Body, Select } from 'playbook-ui'

const SelectInlineShowArrow = (props) => {
  const options = [
    {
      value: '1',
      text: 'Burgers',
    },
    {
      value: '2',
      text: 'Pizza',
    },
    {
      value: '3',
      text: 'Tacos',
    },
  ]

  return (
    <div>
      <Select
          inline
          label="Favorite Food"
          name="food"
          options={options}
          showArrow
      />
      <Body
          status="negative"
      />
    </div>
  )
}

export default SelectInlineShowArrow

Select Inline Compact

import React from 'react'

import { Body, Select } from 'playbook-ui'

const SelectInlineCompact = (props) => {
  const options = [
    {
      value: '1',
      text: 'Burgers',
    },
    {
      value: '2',
      text: 'Pizza',
    },
    {
      value: '3',
      text: 'Tacos',
    },
  ]

  return (
    <div>
      <Select
          compact
          inline
          label="Favorite Food"
          name="food"
          options={options}
      />
      <Body
          status="negative"
      />
    </div>
  )
}

export default SelectInlineCompact

Select Multiple

The multiple prop enables multiple selections; however, for a better user experience, we recommend our Typeahead kit.

import React from 'react'

import { Select } from 'playbook-ui'

const SelectMultiple = (props) => {
  const options = [
    {
      value: '1',
      text: 'Burgers',
    },
    {
      value: '2',
      text: 'Pizza',
    },
    {
      value: '3',
      text: 'Tacos',
    },
    {
      value: '3',
      text: 'BBQ',
    },
    {
      value: '3',
      text: 'Sushi',
    },
    {
      value: '3',
      text: 'Chinese',
    },
    {
      value: '3',
      text: 'Hot Dogs',
    },
  ]

  return (
    <div>
      <Select
          label="Favorite Food"
          multiple
          name="food"
          options={options}
      />
    </div>
  )
}

export default SelectMultiple

React Hook

You can pass react-hook-form props to a select kit. You can use register which will make the value available for both the form validation and submission.

import React, { useState } from "react"

import { Select, Body, Button } from 'playbook-ui'import { useForm } from "react-hook-form"

const SelectReactHook = (props) => {
  const { register, handleSubmit, formState: { errors } } = useForm({
    defaultValues: {
      food: '',
    },
  })

  const [submittedData, setSubmittedData] = useState({
    food: '',
  })

  const onSubmit = (data) => {
    setSubmittedData(data)
  }

  const options = [
    {
      value: 1,
      text: 'Burgers',
    },
    {
      value: 2,
      text: 'Pizza',
    },
    {
      value: 3,
      text: 'Tacos',
    },
  ]

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Select
            {...register("food", { required: true })}
            error={errors.food ? "Please select a food." : null}
            label="Favorite Food"
            options={options}
        />
        <br />
        <Button htmlType="submit"
            marginTop="sm"
            text="Submit"
          />
      </form>
      <Body padding="xs"
          text={`Food: ${submittedData.food}`}
      />
    </>
  )
}

export default SelectReactHook

Input Options

Use the input_options / inputOptions prop to pass additional attributes directly to the underlying <select> element instead of the outer wrapper. This is useful for applying data attributes, custom IDs, or other HTML attributes that need to be on the select element itself.

import React from 'react'

import { Select } from 'playbook-ui'

const SelectInputOptions = (props) => {
  const options = [
    { value: 'pizza', text: 'Pizza' },
    { value: 'tacos', text: 'Tacos' },
    { value: 'sushi', text: 'Sushi' },
  ]

  return (
    <>
      <Select
          inputOptions={{
            'aria-label': 'Select your favorite food',
            className: 'custom-select-class',
            id: 'favorite-food-select',
          }}
          label="Favorite Food"
          name="favorite_food"
          options={options}
      />
    </>
  )
}

export default SelectInputOptions

Things to Avoid

Try to avoid using select when there are limited options to choose from (ie either or questions, yes/no questions, etc).

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Github

Connect Chat