);
}
export default App;
```
## Common Examples
```tsx theme={null}
import { SelectTrigger } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
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](/docs/web/components/combobox/design#complex-selection-alternatives) for `Combobox`.)
Note that the `SelectTrigger` can modify the selected items on it's own with the "X" button on both individual `Chip`s 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`.
```tsx lines expandable theme={null}
import {
SelectTrigger,
Flex,
Dialog,
Checkbox,
Button,
type CheckboxProps,
} from "@servicetitan/anvil2";
import { useState } from "react";
type Item = {
id: number;
name: string;
};
const items = [
{ id: 1, name: "First item" },
{ id: 2, name: "Second item" },
{ id: 3, name: "Third item" },
{ id: 4, name: "Fourth item" },
{ id: 5, name: "Fifth item" },
];
function App() {
const [selectedItems, setSelectedItems] = useState([
items[2],
items[3],
]);
const [dialogSelectedItems, setDialogSelectedItems] = useState([
items[2],
items[3],
]);
const [openDialog, setOpenDialog] = useState(false);
const handleDialogClose = () => setOpenDialog(false);
const handleCancelClick = () => setDialogSelectedItems(selectedItems ?? []);
const handleApplyClick = () => {
setOpenDialog(false);
setSelectedItems(dialogSelectedItems);
};
const handleCheckboxClick: CheckboxProps["onClick"] = (e, state) => {
if (e && state) {
const { checked } = state;
if (checked) {
setDialogSelectedItems((prevItems) =>
prevItems.filter(
(item) => item.name !== (e.target as HTMLInputElement).value,
),
);
} else {
const selectedItem = items.find(
(item) => item.name === (e.target as HTMLInputElement).value,
);
if (selectedItem) {
setDialogSelectedItems((prevItems) => [...prevItems, selectedItem]);
}
}
}
};
return (
