Code

Implementation
SelectTrigger Props

Common Examples

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

function ExampleComponent() {
  return (
    <SelectTrigger
      multiple
      selectedItems={selectedItems}
      itemToString={(item: Item | null) => item?.label ?? ""}
      onClick={() => setOpenDialog(true)}
      onChange={(items: Item[] | null) => setSelectedItems(items ?? [])}
    />
  );
}

Complex selections

The SelectTrigger can be used in complex selection cases where the Combobox would be insufficient. Instead of using the Combobox, the SelectTrigger can be paired with Dialog to handle use cases like secondary actions and tabbed options. (See our usage guidelines for Combobox.)Note that the SelectTrigger can modify the selected items on it’s own with the “X” button on both individual Chips and on the input itself, so the state setter will need to be used in both the SelectTrigger’s onChange and in the form controls inside the Dialog.

Demo

Selected item customization

SelectTriggers with multiple select can customize the selected state of an item using the selectedItemProps prop. This prop accepts a function that will pass the selected item as an parameter to allow for things like customizing the display color:

Demo

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

function ExampleComponent() {
return (

<SelectTrigger
  itemToString={(item) => item?.label ?? ""}
  selectedItem={selectedItem}
  onClick={() => {}}
  onChange={(item) => {}}
/>
); }

`SelectTrigger` Props

The SelectTrigger component accepts most props that can be passed to TextField, such as label, required, moreInfo, size, prefix, suffix, description, hint, and error.

disableClearSelection

boolean

default:"false"

Remove the clear button to disable user clearing the input after selecting.

itemToKey

(item: Item) => string | number | null

Function to get a unique key from an item.

itemToString

(item: Item) => string

Function to convert an item to a display string.

multiple

boolean

default:"false"

onChange

(Items[]) => unknown

The onChange will fire when the input is cleared or if any individual item is removed

onClick

(MouseEvent) => void

selectedItemProps

(Item) => ChipProps

Only if multiple is true

selectedItem

Item

Only if multiple is false

selectedItems

Item[]

Only if multiple is true.

Anvil2 Web

Resources

Common Examples

Complex selections

Selected item customization

`SelectTrigger` Props

Anvil2 Web

Resources

​Common Examples

​Complex selections

​Selected item customization

​SelectTrigger Props

Common Examples

Complex selections

Selected item customization

`SelectTrigger` Props