Code

Implementation
Single-select Listbox Props
Multi-select Listbox Props
Listbox.Option Props

Common Examples

import { Listbox } from "@servicetitan/anvil2";

const ExampleComponent = () => {
  const itemsArray = [
    { id: 0, label: "First item" },
    // ... more items
  ];

  return (
    <Listbox items={itemsArray}>
      {({ items }) =>
        items.map((item) => (
          <Listbox.Option key={item.label} item={item}>
            {item.label}
          </Listbox.Option>
        ))
      }
    </Listbox>
  );
};

Listbox Components

A listbox can be created using the Listbox component and its two sub-components:

Listbox.Option: used to render the individual list options.
Listbox.OptionGroup: optionally used to group listbox options.

Single-select `Listbox` using labels only

<Listbox
  selectionMode="single"
  defaultSelected="option-1"
  selected="option-1"
  disableAutoSelectOnFocus={false}
  onSelectionChange={(selected) => console.log(selected)}
>
  <Listbox.Option label="Option 1" value="option-1" />
  <Listbox.Option label="Option 2" value="option-2" />
</Listbox>

The Listbox component can accept any valid HTML ul props, with the exception that children could change depending on whether items is supplied.

children

ReactNode

defaultSelected

string

disableAutoSelectOnFocus

boolean

onSelectionChange

(selected: string | undefined) => void

selected

string

selectionMode

"multiple" | "single"

default:"single"

See other tables for changes in types for "multiple"

Single-select `Listbox` using `items` array

<Listbox
  items={itemsArray}
  selectionMode="single"
  defaultSelected={itemsArray[0]}
  selected={itemsArray[0]}
  disableAutoSelectOnFocus={false}
  onSelectionChange={(selected) => console.log(selected)}
>
  {({ items }) =>
    items.map((item) => (
      <Listbox.Option key={item.id} item={item}>
        {item.label}
      </Listbox.Option>
    ))
  }
</Listbox>

T represents any arbitrary type used for the items, and ListboxItemType<T> implies that it will include a label: string property.

children

({ items }: { items: ListboxItemType<T>[] }) => ReactNode

defaultSelected

ListboxItemType<T>

disableAutoSelectOnFocus

boolean

items

ListboxItemType<T>[]

onSelectionChange

(selected: ListboxItemType<T> | undefined) => void

selected

ListboxItemType<T>

selectionMode

"multiple" | "single"

default:"single"

See other tables for changes in types for "multiple"

Multi-select `Listbox` using labels only

<Listbox
  selectionMode="multiple"
  defaultSelected={["option-1", "option-2"]}
  selected={["option-1", "option-2"]}
  onSelectionChange={(selected) => console.log(selected)}
>
  <Listbox.Option label="Option 1" value="option-1" />
  <Listbox.Option label="Option 2" value="option-2" />
</Listbox>

children

ReactNode

defaultSelected

string[]

onSelectionChange

(selected: string[] | undefined) => void

selected

string[]

selectionMode

"multiple" | "single"

default:"multiple"

See other tables for changes in types for "single"

Multi-select `Listbox` using `items` array

<Listbox
  items={itemsArray}
  selectionMode="multiple"
  defaultSelected={[itemsArray[0], itemsArray[1]]}
  selected={[itemsArray[0], itemsArray[1]]}
  onSelectionChange={(selected) => console.log(selected)}
>
  {({ items }) =>
    items.map((item) => (
      <Listbox.Option key={item.id} item={item}>
        {item.label}
      </Listbox.Option>
    ))
  }
</Listbox>

T represents any arbitrary type used for the items, and ListboxItemType<T> implies that it will include a label: string property.

children

({ items }: { items: ListboxItemType<T>[] }) => ReactNode

defaultSelected

ListboxItemType<T>[]

items

ListboxItemType<T>[]

onSelectionChange

(selected: ListboxItemType<T>[] | undefined) => void

selected

ListboxItemType<T>[]

selectionMode

"multiple" | "single"

default:"multiple"

See other tables for changes in types for "single"

<Listbox.Option item={item} label="Option 1" value="option-1" disabled={false}>
  Option content
</Listbox.Option>

`Listbox.Option` Props

In addition to the props listed below, the Listbox.Option component can accept any valid HTML li props.

disabled

boolean

item

{ label: string; [key: string]: unknown; }

Use with items prop on parent Listbox

label

string

Required if no item provided

value

string

Anvil2 Web

Resources

Common Examples

Listbox Components

Single-select `Listbox` using labels only

Single-select `Listbox` using `items` array

Multi-select `Listbox` using labels only

Multi-select `Listbox` using `items` array

`Listbox.Option` Props

Anvil2 Web

Resources

​Common Examples

​Listbox Components

​Single-select Listbox using labels only

​Single-select Listbox using items array

​Multi-select Listbox using labels only

​Multi-select Listbox using items array

​Listbox.Option Props

Common Examples

Listbox Components

Single-select `Listbox` using labels only

Single-select `Listbox` using `items` array

Multi-select `Listbox` using labels only

Multi-select `Listbox` using `items` array

`Listbox.Option` Props