SelectMenu#

The <SelectMenu> component is made up of two elements: a disclosure (triggerable button), and a popover list of options.

Import#

import { SelectMenu } from 'bumbag'

Usage#

Editable example

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

Labels#

Select a fruit...

Editable example

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      label="Select a fruit..."
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      label="Select a fruit..."
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      value={value}
    />
  )
}

If you want to have the label contained within the bounds of the select menu field, supply the containLabel prop:

Select a fruit...

Editable example

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      containLabel
      label="Select a fruit..."
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      containLabel
      label="Select a fruit..."
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      value={value}
    />
  )
}

Fields#

You can also use the <SelectMenuField> component, which internally has a FieldWrapper to wrap form controls such as labels, hint text and validation text.

It accepts a combination of SelectMenu props and FieldWrapper props.

Select a fruit

Editable example

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenuField
      label="Select a fruit"
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenuField
      label="Select a fruit"
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

Sizes#

Editable example

function Example() {
  const [value, setValue] = React.useState();

  return (
    <Stack spacing="major-1">
      <SelectMenu
        size="small"
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
      />
      <SelectMenu
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
      />
      <SelectMenu
        size="medium"
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
      />
      <SelectMenu
        size="large"
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
      />
    </Stack>
  );
}

function Example() {
  const [value, setValue] = React.useState();

  return (
    <Stack spacing="major-1">
      <SelectMenu
        size="small"
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
      />
      <SelectMenu
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
      />
      <SelectMenu
        size="medium"
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
      />
      <SelectMenu
        size="large"
        onChange={setValue}
        options={[
          { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
          { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
          { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
          { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
        ]}
        placeholder="Select a fruit..."
        value={value}
      />
    </Stack>
  );
}

Disabled#

Editable example

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      disabled
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      disabled
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

Disabled options#

Editable example

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      onChange={setValue}
      options={[
        { disabled: true, key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { disabled: true, key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      onChange={setValue}
      options={[
        { disabled: true, key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { disabled: true, key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

Search#

Editable example

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      hasSearch
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      hasSearch
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

Multi-select#

Editable example

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      isMultiSelect
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      isMultiSelect
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

With tags#

Editable example

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      hasTags
      isMultiSelect
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      hasTags
      isMultiSelect
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

Loading indicator#

Editable example

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      isLoading
      onChange={setValue}
      options={[]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      isLoading
      onChange={setValue}
      options={[]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

Option icons#

Editable example

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples', iconBefore: 'solid-apple-alt' },
        { key: 2, label: 'Bananas', value: 'bananas', iconAfter: 'solid-apple-alt' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples', iconBefore: 'solid-apple-alt' },
        { key: 2, label: 'Bananas', value: 'bananas', iconAfter: 'solid-apple-alt' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

Fetching data (async)#

Editable example

function Example() {
  const [value, setValue] = React.useState();

  const getOptions = React.useCallback(async ({ searchText }) => {
    return fetch(`https://rickandmortyapi.com/api/location/?name=${searchText}`)
      .then(res => res.json())
      .then(({ results }) => ({
        options: results.map(character => ({ key: character.id, label: character.name, value: character }))
      }))
      .catch(err => ({ options: [] }));
  }, [])

  return (
    <SelectMenu
      cacheKey="basic"
      onChange={setValue}
      loadOptions={getOptions}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState();

  const getOptions = React.useCallback(async ({ searchText }) => {
    return fetch(`https://rickandmortyapi.com/api/location/?name=${searchText}`)
      .then(res => res.json())
      .then(({ results }) => ({
        options: results.map(character => ({ key: character.id, label: character.name, value: character }))
      }))
      .catch(err => ({ options: [] }));
  }, [])

  return (
    <SelectMenu
      cacheKey="basic"
      onChange={setValue}
      loadOptions={getOptions}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

Pagination#

Editable example

function Example() {
  const [value, setValue] = React.useState();

  const getOptions = React.useCallback(async ({ page, searchText }) => {
    return fetch(`https://rickandmortyapi.com/api/location/?name=${searchText}&page=${page}`)
      .then(res => res.json())
      .then(({ results }) => ({
        options: results.map(character => ({ key: character.id, label: character.name, value: character }))
      }))
      .catch(err => ({ options: [] }));
  }, [])

  return (
    <SelectMenu
      hasSearch
      pagination
      cacheKey="basic"
      onChange={setValue}
      loadOptions={getOptions}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState();

  const getOptions = React.useCallback(async ({ page, searchText }) => {
    return fetch(`https://rickandmortyapi.com/api/location/?name=${searchText}&page=${page}`)
      .then(res => res.json())
      .then(({ results }) => ({
        options: results.map(character => ({ key: character.id, label: character.name, value: character }))
      }))
      .catch(err => ({ options: [] }));
  }, [])

  return (
    <SelectMenu
      hasSearch
      pagination
      cacheKey="basic"
      onChange={setValue}
      loadOptions={getOptions}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

Deferred#

Editable example

function Example() {
  const [value, setValue] = React.useState();

  const getOptions = React.useCallback(async ({ page, searchText }) => {
    return fetch(`https://rickandmortyapi.com/api/location/?name=${searchText}&page=${page}`)
      .then(res => res.json())
      .then(({ results }) => ({
        options: results.map(character => ({ key: character.id, label: character.name, value: character }))
      }))
      .catch(err => ({ options: [] }));
  }, [])

  return (
    <SelectMenu
      defer
      cacheKey="basic"
      onChange={setValue}
      loadOptions={getOptions}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState();

  const getOptions = React.useCallback(async ({ page, searchText }) => {
    return fetch(`https://rickandmortyapi.com/api/location/?name=${searchText}&page=${page}`)
      .then(res => res.json())
      .then(({ results }) => ({
        options: results.map(character => ({ key: character.id, label: character.name, value: character }))
      }))
      .catch(err => ({ options: [] }));
  }, [])

  return (
    <SelectMenu
      defer
      cacheKey="basic"
      onChange={setValue}
      loadOptions={getOptions}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

Custom disclosure#

Editable example

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      renderDisclosure={
        ({ disclosureProps, label }) =>
          <Box {...disclosureProps}>{label}</Box>
      }
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      renderDisclosure={
        ({ disclosureProps, label }) =>
          <Box {...disclosureProps}>{label}</Box>
      }
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

Custom option component#

Editable example

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      hasSearch
      renderOption={({ MatchedLabel, option }) =>
        <React.Fragment>
          <MatchedLabel />
          <br/>
          <Text fontSize="100">{option.price}</Text>
        </React.Fragment>
      }
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
        { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
        { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
        { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      hasSearch
      renderOption={({ MatchedLabel, option }) =>
        <React.Fragment>
          <MatchedLabel />
          <br/>
          <Text fontSize="100">{option.price}</Text>
        </React.Fragment>
      }
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
        { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
        { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
        { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

Custom empty text#

Editable example

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      emptyText="No fruits found."
      onChange={setValue}
      options={[]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      emptyText="No fruits found."
      onChange={setValue}
      options={[]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

Custom empty component#

Editable example

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      renderEmpty={({ StaticItem, emptyText, inputValue }) =>
        <StaticItem>
          {emptyText}
          <br />
          <Link>
            Create a fruit
          </Link>
        </StaticItem>
      }
      onChange={setValue}
      options={[]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      renderEmpty={({ StaticItem, emptyText, inputValue }) =>
        <StaticItem>
          {emptyText}
          <br />
          <Link>
            Create a fruit
          </Link>
        </StaticItem>
      }
      onChange={setValue}
      options={[]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

Editable example

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      hasSearch
      renderEmpty={({ Item, searchText }) =>
        <Item>
          Create <Text fontWeight="semibold">{searchText}</Text>
        </Item>
      }
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
        { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
        { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
        { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      hasSearch
      renderEmpty={({ Item, searchText }) =>
        <Item>
          Create <Text fontWeight="semibold">{searchText}</Text>
        </Item>
      }
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples', price: '$10.00/kg' },
        { key: 2, label: 'Bananas', value: 'bananas', price: '$8.50/kg' },
        { key: 3, label: 'Oranges', value: 'oranges', price: '$9.50/kg' },
        { key: 4, label: 'Mangos', value: 'mangos', price: '$8.00/kg' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

Custom top actions component#

Editable example

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      renderTopActions={({ StaticItem }) =>
        <StaticItem hideDropdownOnClick>
          <Link>
            Create a fruit
          </Link>
        </StaticItem>
      }
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' },
        { key: 5, label: 'Peaches', value: 'peaches' },
        { key: 6, label: 'Strawberries', value: 'Strawberries' },
        { key: 7, label: 'Pineapples', value: 'pineapples' },
        { key: 8, label: 'Figs', value: 'figs' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      renderTopActions={({ StaticItem }) =>
        <StaticItem hideDropdownOnClick>
          <Link>
            Create a fruit
          </Link>
        </StaticItem>
      }
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' },
        { key: 5, label: 'Peaches', value: 'peaches' },
        { key: 6, label: 'Strawberries', value: 'Strawberries' },
        { key: 7, label: 'Pineapples', value: 'pineapples' },
        { key: 8, label: 'Figs', value: 'figs' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

Custom bottom actions component#

Editable example

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      renderBottomActions={({ StaticItem }) =>
        <StaticItem>
          <Link>
            Create a fruit
          </Link>
        </StaticItem>
      }
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' },
        { key: 5, label: 'Peaches', value: 'peaches' },
        { key: 6, label: 'Strawberries', value: 'Strawberries' },
        { key: 7, label: 'Pineapples', value: 'pineapples' },
        { key: 8, label: 'Figs', value: 'figs' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

function Example() {
  const [value, setValue] = React.useState();

  return (
    <SelectMenu
      renderBottomActions={({ StaticItem }) =>
        <StaticItem>
          <Link>
            Create a fruit
          </Link>
        </StaticItem>
      }
      onChange={setValue}
      options={[
        { key: 1, label: 'Apples', value: 'apples' },
        { key: 2, label: 'Bananas', value: 'bananas' },
        { key: 3, label: 'Oranges', value: 'oranges' },
        { key: 4, label: 'Mangos', value: 'mangos' },
        { key: 5, label: 'Peaches', value: 'peaches' },
        { key: 6, label: 'Strawberries', value: 'Strawberries' },
        { key: 7, label: 'Pineapples', value: 'pineapples' },
        { key: 8, label: 'Figs', value: 'figs' }
      ]}
      placeholder="Select a fruit..."
      value={value}
    />
  )
}

Accessibility#

Patterns#

SelectMenu has a role of combobox.
The SelectMenu trigger button has a role of button.
The trigger button has aria-expanded set to true/false depending on the visibility of the popover listbox.
The trigger button has aria-haspopup set to listbox.
The trigger button has it's aria-controls value set to the ID of the popover listbox.
The SelectMenu popover has a role of listbox.
Pressing Enter or Space on the trigger button will trigger the popover listbox.
If the menu is open, pressing Esc will close the listbox.
If the menu is open, clicking outside the menu bounds will close the listbox.
If the menu is open, pressing ↑ or ↓ will navigate the menu items.

Props#

SelectMenu Props#

cacheKey string

The key to cache the loadOptions results against.

containLabel boolean

If the label prop is supplied, is it contained inside the select?

defer boolean

Whether or not the invocation of loadOptions should be deferred until it the Autosuggest is opened.

disabled boolean

Indicates if the Autosuggest is disabled.

disableClear boolean

Indicates if the clear button should be disabled.

hasSearch boolean

Indicates if the select menu has a search component.

hasTags boolean

Indicates if the select menu should have tags of the selected options.

isDropdown boolean

Indicates if the select menu is a dropdown menu. Default: true

isLoading boolean

Indicates if the select menu is loading.

isMultiSelect boolean

Indicates if multiple options should be selected.

label string

limit number

Applies a limit to the number of options that appear in the list.

loadOptions

(options: { page?: number; searchText?: string; variables?: any; }) => Promise<{ options: Options; }>

Supply an async function to loadOptions to load options from an external data source.

loadVariables { [key: string]: any; }

Supply variables (i.e. query parameters) to the loadOptions function.

options Option[]

Options to show in the list. If loadOptions is supplied, then you don't need to supply this.

onChange Required

(newOptions: ""
  | Option
  | Option[], option: ""
  | Option) => void

Function to invoke when the option has been changed.

pagination boolean

Indicates if the list should be paginated. If true, then pagination will be applied to loadOptions.

popoverHeight string

Sets the height of the popover list.

placeholder string

Sets the placeholder of the search input.

size

"default"
  | (string & {})
  | "small"
  | "medium"
  | "large"

Sets the size of the select menu button

state string

Sets the visual state of the Autosuggest.

value { key?: ReactText; label?: string; value?: any; } Required

Sets the value of the Autosuggest. Must be in the shape of an option (i.e. { key: 1, label: 'Jake', value: 'legend' }).

errorText string

emptyText string

loadingText string

loadingMoreText string

renderBottomActions any

renderDisclosure any

renderError any

renderEmpty any

renderLoading any

renderLoadingMore any

renderOption any

renderTopActions any

buttonProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 807 more ...;
  ignoreGrayOverride?: boolean;
}

itemProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 816 more ...;
  isTabbable?: boolean;
}

popoverProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 817 more ...;
  isTabbable?: boolean;
}

searchInputProps

{
  unstable_system?: any;
  top?: string | number | {
    [key: string]: string
  }; right?: string | number | {
    [key: string]: string
  }; bottom?: string | number | {
    [key: string]: string
  }; left?: string | number | {
    [key: string]: string
  }; ... 809 more ...;
  onFocus?: (event: FocusEvent<...>) => void;
}

tagProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 787 more ...;
  size?: Flexible<...>;
}

dropdownMenuInitialState

{
  baseId?: string;
  unstable_virtual?: boolean;
  currentId?: string;
  orientation?: Orientation;
  wrap?: boolean | "horizontal" | "vertical";
  rtl?: boolean;
  loop?: boolean | "horizontal" | "vertical";
  ... 11 more ...;
  unstable_preventOverflow?: boolean;
}

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

SelectMenuField Props#

addonBefore

ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Addon component to the input (before). Similar to the addon components in Input.

addonAfter

ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Addon component to the input (after). Similar to the addon components in Input.

selectMenuProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 821 more ...;
  dropdownMenuInitialState?: Partial<...>;
}

Additional props for the SelectMenu component

orientation "horizontal" | "vertical"

If addonBefore or addonAfter exists, then the addons will render vertically.

Inherits SelectMenu props

cacheKey string

The key to cache the loadOptions results against.

containLabel boolean

If the label prop is supplied, is it contained inside the select?

defer boolean

Whether or not the invocation of loadOptions should be deferred until it the Autosuggest is opened.

disabled boolean

Indicates if the Autosuggest is disabled.

disableClear boolean

Indicates if the clear button should be disabled.

hasSearch boolean

Indicates if the select menu has a search component.

hasTags boolean

Indicates if the select menu should have tags of the selected options.

isDropdown boolean

Indicates if the select menu is a dropdown menu. Default: true

isLoading boolean

Indicates if the select menu is loading.

isMultiSelect boolean

Indicates if multiple options should be selected.

label string

limit number

Applies a limit to the number of options that appear in the list.

loadOptions

(options: { page?: number; searchText?: string; variables?: any; }) => Promise<{ options: Options; }>

Supply an async function to loadOptions to load options from an external data source.

loadVariables { [key: string]: any; }

Supply variables (i.e. query parameters) to the loadOptions function.

options Option[]

Options to show in the list. If loadOptions is supplied, then you don't need to supply this.

onChange Required

(newOptions: ""
  | Option
  | Option[], option: ""
  | Option) => void

Function to invoke when the option has been changed.

pagination boolean

Indicates if the list should be paginated. If true, then pagination will be applied to loadOptions.

popoverHeight string

Sets the height of the popover list.

placeholder string

Sets the placeholder of the search input.

size

"default"
  | (string & {})
  | "small"
  | "medium"
  | "large"

Sets the size of the select menu button

state string

Sets the visual state of the Autosuggest.

value { key?: ReactText; label?: string; value?: any; } Required

Sets the value of the Autosuggest. Must be in the shape of an option (i.e. { key: 1, label: 'Jake', value: 'legend' }).

errorText string

emptyText string

loadingText string

loadingMoreText string

renderBottomActions any

renderDisclosure any

renderError any

renderEmpty any

renderLoading any

renderLoadingMore any

renderOption any

renderTopActions any

buttonProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 807 more ...;
  ignoreGrayOverride?: boolean;
}

itemProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 816 more ...;
  isTabbable?: boolean;
}

popoverProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 817 more ...;
  isTabbable?: boolean;
}

searchInputProps

{
  unstable_system?: any;
  top?: string | number | {
    [key: string]: string
  }; right?: string | number | {
    [key: string]: string
  }; bottom?: string | number | {
    [key: string]: string
  }; left?: string | number | {
    [key: string]: string
  }; ... 809 more ...;
  onFocus?: (event: FocusEvent<...>) => void;
}

tagProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 787 more ...;
  size?: Flexible<...>;
}

dropdownMenuInitialState

{
  baseId?: string;
  unstable_virtual?: boolean;
  currentId?: string;
  orientation?: Orientation;
  wrap?: boolean | "horizontal" | "vertical";
  rtl?: boolean;
  loop?: boolean | "horizontal" | "vertical";
  ... 11 more ...;
  unstable_preventOverflow?: boolean;
}

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

Inherits FieldWrapper props

description

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the description text of the field wrapper.

hint

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the bottom hint text of the field wrapper.

isOptional boolean

Sets the optional flag (and displays optional text) on the field wrapper.

isRequired boolean

Sets the required flag (and a required astrix) on the field wrapper.

labelType "label" | "legend"

Sets the label type on the field wrapper.

tooltip

string
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the tooltip of the field wrapper. Can be either a string, or a React component.

tooltipTriggerComponent

ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<any, any, any>)>

Sets the tooltip trigger component.

validationText string

Sets the bottom validation text of the field wrapper.

Theming#

SelectMenu.styles.base

SelectMenu.Button.styles.base

SelectMenu.ButtonText.styles.base

SelectMenu.ButtonIconsWrapper.styles.base

SelectMenu.ButtonIcon.styles.base

SelectMenu.Popover.styles.base

SelectMenu.Item.styles.base

SelectMenu.ItemText.styles.base

SelectMenu.SearchInputWrapper.styles.base

SelectMenu.SearchInput.styles.base

SelectMenu.StaticItem.styles.base