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

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 (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 { useForm } from "react-hook-form"
import { Button, Body, Select } from "playbook-ui"

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

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