- 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 theListbox 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>
Listbox component can accept any valid HTML ul props, with the exception that children could change depending on whether items is supplied.ReactNode
string
boolean
(selected: string | undefined) => void
string
"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.({ items }: { items: ListboxItemType<T>[] }) => ReactNode
ListboxItemType<T>
boolean
ListboxItemType<T>[]
(selected: ListboxItemType<T> | undefined) => void
ListboxItemType<T>
"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>
ReactNode
string[]
(selected: string[] | undefined) => void
string[]
"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.({ items }: { items: ListboxItemType<T>[] }) => ReactNode
ListboxItemType<T>[]
ListboxItemType<T>[]
(selected: ListboxItemType<T>[] | undefined) => void
ListboxItemType<T>[]
"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.boolean
{ label: string; [key: string]: unknown; }
Use with
items prop on parent Listboxstring
Required if no
item providedstring