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.

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>
)

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>
  )
})

Props

Accepts InputBox props.

childrenReactNode

Usually accepts Select.OptionGroup and Select.Option.

defaultOpenboolean

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

defaultValueunknown

Initial value when component is uncontrolled.

disabledboolean

Disables the select.

emptyValueany

The value to show when nothing is selected

innerRefany

Gain access to the internal ref

keepInViewboolean

Attempts to keep popover in view clipping edges if too large.

lockScrollWhileOpenboolean

Locks external scrollbars when open.

matchWidthsboolean | 'minimum'

Matches anchor and popover widths.

multipleIsMultiple

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.

onChangeunknown

Callback when an option has been selected/deselected.

optionsArray

label:string

optgroup:Array

value:V

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

placementPlacement

Where to place the popover.

popoverPropsobject

Accepts any valid Popover props.

renderToHTMLElement | string

Where to render the popover into. Accepts an HTML element or selector. Uses the closest fixed parent or document.body by default. This will only be computed once on initial render.

renderValue(item: any) => ReactNode

Control how the selected value is displayed.

valueunknown

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.

Props

PreviousRangeSlider NextSelect.Inline