Select

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

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

Select w/ Error

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

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

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

  return (
    <div>
      <Select
          error="Please make a valid selection"
          label="Favorite Food"
          name="food"
          options={options}
          value="2"
      />
      <Body
          error="Please make a valid selection"
          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 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

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

Dribbble

Github

Connect Chat