Select

View Source

Provide a list of options that can be selected. Replaces native select menus by using aria roles to enhance accessibility while allowing full customization of the options and what is used in the select popover. Composes InputBox and Popover.

Select a fruit

Copy

Edit

render(
  <Select
    emptyValue="Select a fruit"
    tooltip={{ title: 'Select a fruit' }}
    onChange={(e) => console.log(e)}
  >
    <Select.Option value="apple">Apple</Select.Option>
    <Select.Option value="orange">Orange</Select.Option>
    <Select.Option value="banana">Banana</Select.Option>
    <Select.Option value="mango">Mango</Select.Option>
    <Select.Option value="kiwi" disabled>
      Kiwi (Out of stock)
    </Select.Option>
    <Select.Option value="strawberry">Strawberry</Select.Option>
    <Divider margin={0.5} />
    <Menu.Item distribution="fill" spacing={1}>
      <Button title="Action 1" size="sm" />
      <Button title="Action 2" size="sm" />
    </Menu.Item>
  </Select>
)

render(
  <Select
    emptyValue="Select a fruit"
    tooltip={{ title: 'Select a fruit' }}
    onChange={(e) => console.log(e)}
  >
    <Select.Option value="apple">Apple</Select.Option>
    <Select.Option value="orange">Orange</Select.Option>
    <Select.Option value="banana">Banana</Select.Option>
    <Select.Option value="mango">Mango</Select.Option>
    <Select.Option value="kiwi" disabled>
      Kiwi (Out of stock)
    </Select.Option>
    <Select.Option value="strawberry">Strawberry</Select.Option>
    <Divider margin={0.5} />
    <Menu.Item distribution="fill" spacing={1}>
      <Button title="Action 1" size="sm" />
      <Button title="Action 2" size="sm" />
    </Menu.Item>
  </Select>
)

Copy

Edit

const options = [
  {
    label: 'Dogs',
    optgroup: [
      { value: 'frenchy', label: 'French Bulldog' },
      { value: 'pit-bull', label: 'Pit Bull' },
    ],
  },
  {
    label: 'Cats',
    optgroup: [
      { value: 'munchkin', label: 'Munchkin' },
      { value: 'persian', label: 'Persian' },
    ],
  },
]
render(() => {
  const ref = React.useRef(null)
  const [selectedValues, setSelectedValues] = React.useState([])
  return (
    <StackView
      innerRef={ref}
      as="form"
      id="container"
      position="relative"
      alignment="center"
      spacing={1}
    >
      <Select
        name="pets"
        multiple
        options={options}
        value={selectedValues}
        matchWidths={false}
        emptyValue="Choose your favorite pets"
        renderTo="#container"
        onChange={(event) => setSelectedValues(event.value)}
      />
      <Button
        title="Submit"
        size="xs"
        theme="primary"
        onClick={() => ref.current.submit()}
      />
    </StackView>
  )
})

const options = [
  {
    label: 'Dogs',
    optgroup: [
      { value: 'frenchy', label: 'French Bulldog' },
      { value: 'pit-bull', label: 'Pit Bull' },
    ],
  },
  {
    label: 'Cats',
    optgroup: [
      { value: 'munchkin', label: 'Munchkin' },
      { value: 'persian', label: 'Persian' },
    ],
  },
]
render(() => {
  const ref = React.useRef(null)
  const [selectedValues, setSelectedValues] = React.useState([])
  return (
    <StackView
      innerRef={ref}
      as="form"
      id="container"
      position="relative"
      alignment="center"
      spacing={1}
    >
      <Select
        name="pets"
        multiple
        options={options}
        value={selectedValues}
        matchWidths={false}
        emptyValue="Choose your favorite pets"
        renderTo="#container"
        onChange={(event) => setSelectedValues(event.value)}
      />
      <Button
        title="Submit"
        size="xs"
        theme="primary"
        onClick={() => ref.current.submit()}
      />
    </StackView>
  )
})

Select an item

Copy

Edit

const options = [
  {
    title: 'Arrangement Files',
    options: [
      {
        label: 'Chord Chart + → Lyrics & Chords',
        type: 'TXT',
      },
      {
        label: 'Lead Sheet',
        type: 'PDF',
      },
    ],
  },
  {
    title: 'E (Most Common)',
    options: [
      {
        label: 'E Chord Chart +',
        type: 'PDF',
      },
    ],
  },
  {
    title: 'Ab',
    options: [
      {
        label: 'Ab Chord Chart +',
        type: 'PDF',
      },
    ],
  },
]
render(
  <Select
    multiple
    renderValue={(selectedOptions) => (
      <Select.Value>
        {selectedOptions.map((option) => option.value).join(', ')}
      </Select.Value>
    )}
  >
    {options.map((optgroup) => (
      <Select.OptionGroup key={optgroup.title} title={optgroup.title}>
        {optgroup.options.map((option) => (
          <Select.Option key={option.label} value={option.label}>
            <Text marginRight={2}>{option.label}</Text>
            <Badge size="xs" marginLeft="auto">
              {option.type}
            </Badge>
          </Select.Option>
        ))}
      </Select.OptionGroup>
    ))}
  </Select>
)

const options = [
  {
    title: 'Arrangement Files',
    options: [
      {
        label: 'Chord Chart + → Lyrics & Chords',
        type: 'TXT',
      },
      {
        label: 'Lead Sheet',
        type: 'PDF',
      },
    ],
  },
  {
    title: 'E (Most Common)',
    options: [
      {
        label: 'E Chord Chart +',
        type: 'PDF',
      },
    ],
  },
  {
    title: 'Ab',
    options: [
      {
        label: 'Ab Chord Chart +',
        type: 'PDF',
      },
    ],
  },
]
render(
  <Select
    multiple
    renderValue={(selectedOptions) => (
      <Select.Value>
        {selectedOptions.map((option) => option.value).join(', ')}
      </Select.Value>
    )}
  >
    {options.map((optgroup) => (
      <Select.OptionGroup key={optgroup.title} title={optgroup.title}>
        {optgroup.options.map((option) => (
          <Select.Option key={option.label} value={option.label}>
            <Text marginRight={2}>{option.label}</Text>
            <Badge size="xs" marginLeft="auto">
              {option.type}
            </Badge>
          </Select.Option>
        ))}
      </Select.OptionGroup>
    ))}
  </Select>
)

Select an item

Copy

Edit

render(
  <Box>
    <Select multiple>
      <Select.OptionGroup title="Group 1">
        <Select.Option value="1">One</Select.Option>
        <Select.Option value="2">Two</Select.Option>
        <Select.Option value="3">Three</Select.Option>
      </Select.OptionGroup>
      <Select.OptionGroup title="Group 2">
        <Select.Option value="4">Four</Select.Option>
        <Select.Option value="5">Five</Select.Option>
        <Select.Option value="6">Six</Select.Option>
      </Select.OptionGroup>
    </Select>
  </Box>
)

render(
  <Box>
    <Select multiple>
      <Select.OptionGroup title="Group 1">
        <Select.Option value="1">One</Select.Option>
        <Select.Option value="2">Two</Select.Option>
        <Select.Option value="3">Three</Select.Option>
      </Select.OptionGroup>
      <Select.OptionGroup title="Group 2">
        <Select.Option value="4">Four</Select.Option>
        <Select.Option value="5">Five</Select.Option>
        <Select.Option value="6">Six</Select.Option>
      </Select.OptionGroup>
    </Select>
  </Box>
)

Select an item

Copy

Edit

render(
  <Box padding={2} backgroundColor="primary">
    <Select.Inline light>
      {generateRange(100).map((number) => (
        <Select.Option key={number} value={number}>
          {number}
        </Select.Option>
      ))}
    </Select.Inline>
    <Input.Inline
      size="xl"
      fontSize={0}
      light
      defaultValue="Editable Heading"
    />
  </Box>
)

render(
  <Box padding={2} backgroundColor="primary">
    <Select.Inline light>
      {generateRange(100).map((number) => (
        <Select.Option key={number} value={number}>
          {number}
        </Select.Option>
      ))}
    </Select.Inline>
    <Input.Inline
      size="xl"
      fontSize={0}
      light
      defaultValue="Editable Heading"
    />
  </Box>
)

Props

emptyValueany

The value to show when nothing is selected

defaultOpenboolean

Controls the initial Popover state: open or closed (default).

multipleboolean

Allows multiple selection of values. Note that value must be an array if using a controlled component and multiple is true.

namestring

Sets internal hidden input[s] to the current selected value[s]. Useful for components that collect data outside of React and need to be posted to a form.

onChangeFunction

Callback when an option has been selected/deselected. returns { value, selectedValue }

optionsArray

label:string

optgroup:Array

value:any

Pass an object instead of children for use when rendering in a non React environment.

renderValuenumber | string | ReactElement | Array | Function

Control how the selected value is displayed.

valueboolean | string | number | Array | Function

Selected value[s]. Accepts any value besides undefined, also accepts a function that returns each Option’s value to determine what should be currently selected.

defaultValueboolean | string | number | Array | Function

Initial value when component is uncontrolled.

popoverPropsobject

Accepts any valid Popover props.

Props

PreviousRangeSlider NextStepperField