Recipes

Changing the listbox button size

ListboxButton offers a small and large size for matching the size of other elements in a form. The following example shows the small size:

Live Editor

function ListboxButtonSizeExample() {
  const { value, onChange } = useSelect({ initialValue: null })

  return (
    <ListboxButton
      minWidth="150px"
      aria-label="Favorite fruit"
      size='small'
      content={
        <Listbox onChange={onChange} value={value} width="200px">
          <Listbox.Group>
            <Listbox.Item value="Apple">Apple</Listbox.Item>
            <Listbox.Item value="Orange">Orange</Listbox.Item>
            <Listbox.Item value="Banana">Banana</Listbox.Item>
          </Listbox.Group>
        </Listbox>
      }
    >
      {value || 'Select a fruit'}
    </ListboxButton>
  )
}

Multiselect

Live Editor

function ListboxMultiselectExample() {
  const { value, onChange } = useMultiselect()
  const currentOption =
    value.length > 1 ? value.length + ' selected' : value.length ? value : null

  return (
    <ListboxButton
      minWidth="150px"
      aria-label="Favorite fruit"
      content={
        <Listbox multiselect onChange={onChange} value={value} width="200px">
          <Listbox.Group>
            <Listbox.Checkbox value="Apple">Apple</Listbox.Checkbox>
            <Listbox.Checkbox value="Orange">Orange</Listbox.Checkbox>
            <Listbox.Checkbox value="Banana">Banana</Listbox.Checkbox>
          </Listbox.Group>
        </Listbox>
      }
    >
      {currentOption || "Select a fruit"}
    </ListboxButton>
  )
}

Groups

Live Editor

function ListboxGroupsExample() {
  const { value, onChange } = useSelect({ initialValue: null })

  return (
    <ListboxButton
      minWidth="150px"
      aria-label="Favorite fruit"
      content={
        <Listbox onChange={onChange} value={value} width="200px">
          <Listbox.Group title="Fruit">
            <Listbox.Item value="Apple">Apple</Listbox.Item>
            <Listbox.Item value="Orange">Orange</Listbox.Item>
            <Listbox.Item value="Banana">Banana</Listbox.Item>
          </Listbox.Group>

          <Listbox.Group title="More fruit">
            <Listbox.Item value="Kiwi">Kiwi</Listbox.Item>
            <Listbox.Item value="Papaya">Papaya</Listbox.Item>
            <Listbox.Item value="Mango">Mango</Listbox.Item>
          </Listbox.Group>
        </Listbox>
      }
    >
      {value || "Select a fruit"}
    </ListboxButton>
  )
}

Using dividers and footerContent

One use for Listbox.Divider is to separate Listbox items from the footer. Any information that you would like to display below the items should be passed to Listbox as footerContent. It is especially important to use footerContent when including interactive content, as it will not be accessible to keyboard users if passed as children.

Live Editor

function ListboxFooterExample() {
  return (
    <Box
      width="220px"
      border={500}
      borderRadius="outer"
      borderColor="container.border.base"
      boxShadow='medium'
    >
      <Listbox
        footerContent={
          <Box p={350}>
            <Link onClick={() => {}}>
              View Fruit Help
            </Link>
          </Box>
        }
      >
        <Listbox.Group title="Fruit">
          <Listbox.Item onClick={() => alert('Apple!')}>Apple</Listbox.Item>
          <Listbox.Item onClick={() => alert('Orange!')}>Orange</Listbox.Item>
          <Listbox.Item onClick={() => alert('Banana!')}>Banana</Listbox.Item>
        </Listbox.Group>
        <Listbox.Divider />
      </Listbox>
    </Box>
  )
}