Guides

Styles

Components

Layout

Icons

Icon set

Illustrations

Illustration set

Patterns

Utilities

CSS utilities
CSS variables

Select

Usage Guidelines

Placeholder

<Select
  placeholder="Choose an option"
  options={[
    { value: 'bahamas', title: 'Bahamas' },
    { value: 'bahrain', title: 'Bahrain' },
    { value: 'bangladesh', title: 'Bangladesh' },
  ]}
/>

<Select
  placeholder="Choose an option"
  options={[
    { value: 'bahamas', title: 'Bahamas' },
    { value: 'bahrain', title: 'Bahrain' },
    { value: 'bangladesh', title: 'Bangladesh' },
  ]}
/>

Selected option

<Select
  selectedOptionValue="bahamas"
  options={[
    { value: 'bahamas', title: 'Bahamas' },
    { value: 'bahrain', title: 'Bahrain' },
    { value: 'bangladesh', title: 'Bangladesh' },
  ]}
/>

<Select
  selectedOptionValue="bahamas"
  options={[
    { value: 'bahamas', title: 'Bahamas' },
    { value: 'bahrain', title: 'Bahrain' },
    { value: 'bangladesh', title: 'Bangladesh' },
  ]}
/>

With icon

<Select
  selectedOptionValue="bahamas"
  options={[
    {
      value: 'bahamas',
      title: 'Bahamas',
      icon: <SvgLaunch />,
    },
    { value: 'bahrain', title: demoText.long, icon: <SvgFolder /> },
    { value: 'without icon', title: 'Without icon' },
  ]}
/>

<Select
  selectedOptionValue="bahamas"
  options={[
    {
      value: 'bahamas',
      title: 'Bahamas',
      icon: <SvgLaunch />,
    },
    { value: 'bahrain', title: demoText.long, icon: <SvgFolder /> },
    { value: 'without icon', title: 'Without icon' },
  ]}
/>

See the Icon set.

Disabled

<Select
  isDisabled
  selectedOptionValue="bahamas"
  options={[{ value: 'bahamas', title: 'Bahamas' }]}
/>

<Select
  isDisabled
  selectedOptionValue="bahamas"
  options={[{ value: 'bahamas', title: 'Bahamas' }]}
/>

Disabled option

<Select
  selectedOptionValue="bahamas"
  options={[
    { value: 'bahamas', title: 'Bahamas' },
    { value: 'disabled option', title: 'Disabled option', isDisabled: true },
    { value: 'disabled option with icon', title: 'Disabled option with icon', icon: <SvgFolder />, isDisabled: true },
    { value: 'bangladesh', title: 'Bangladesh' },
  ]}
/>

<Select
  selectedOptionValue="bahamas"
  options={[
    { value: 'bahamas', title: 'Bahamas' },
    { value: 'disabled option', title: 'Disabled option', isDisabled: true },
    { value: 'disabled option with icon', title: 'Disabled option with icon', icon: <SvgFolder />, isDisabled: true },
    { value: 'bangladesh', title: 'Bangladesh' },
  ]}
/>

Props

prop

type

default

required

menuZIndex

number

100

onChange

func

isDisabled

bool

placeholder

node

selectedOptionValue

string

options

[{

value: string,

title: node,

icon: node,

isDisabled: bool,

}]