Common Examples
import { Chip, Grid, SelectCard, Text } from "@servicetitan/anvil2";
const data = [/*...data for select cards...*/]
function ExampleComponent() {
return (
<SelectCard.Group
legend="Example multiple selection"
required={false}
selectionMode="multiple"
onChange={(e) => {
console.log(e);
}}
>
<Grid gap="4" templateColumns="repeat(3, 1fr)">
{data.map((item) => (
<SelectCard key={item.id} id={item.id}>
<Grid templateColumns="repeat(2, 1fr)" gap="4">
<Text>{item.label}</Text>
<Text style={{ textAlign: "right" }}>{item.cost}</Text>
<Text>{item.timeEstimate}</Text>
<Chip label={item.customerName} />
</Grid>
</SelectCard>
))}
</SelectCard.Group>
);
}
SelectCard Components
The Anvil2 SelectCard is typically used within a SelectCard.Group. Under the hood SelectCard can either be a radio or a checkbox, and accepts all of the props associated with those HTML inputs.
SelectCard.Group: the parent component used to configure a group of SelectCard items.SelectCard: used to create a card input to use with a group.
Validation
SelectCards have an errored state, which can be triggered with an onChange.Select Indicator Visual
Use the showSelectIndicator prop to display a checkbox or radio indicator in a separate column on the left side of the card. The indicator type is automatically determined by the selectionMode from SelectCard.Group.The showSelectIndicator prop is available for both SelectCard and SelectCard.Group, but in most cases it is recommended to use it with SelectCard.Group to show the indicator on all cards in the group.
import { SelectCard } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<SelectCard
id="card-1"
onChange={(value) => console.log(value)}
defaultChecked={false}
disabled={false}
errored={false}
>
Card content
</SelectCard>
); }
SelectCard Props
A unique identifier for the card, used to track the selection state.
Controlled checked state.
Passes props to the underlying Checkbox component.
Uncontrolled checked state.
When true, disables the card.
When true, sets error styling on the card.
Function called on selection state change.
Passes props to the underlying Radio component.
Removes the drop shadow effect on the card.
When true, displays a checkbox or radio indicator in a separate column on the left side of the card. The indicator type (checkbox or radio) is automatically determined by the selectionMode prop on the SelectCard.Group, and defaults to checkbox if no SelectCard.Group is used.
import { SelectCard } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<SelectCard.Group
legend="Group Legend"
required={false}
ariaLabelledBy="group-label"
>
<SelectCard id="card-1" onChange={() => {}}>
Card content
</SelectCard>
</SelectCard.Group>
);
}
SelectCard.Group Props
Sets the legend on the group.
selectionMode
"single" | "multiple"
required
Sets how many cards the user can select: "single" uses radio buttons, "multiple" uses checkboxes.
Associates the legend with content below.
onChange
(e: ChangeEvent, state: { id: string | number; checked: boolean }) => void
Callback function triggered when the selection state changes.
When true, sets “required” text in label. This does not enforce error when
nothing is selected.
When true, displays a checkbox or radio indicator in a separate column on the left side of the each of the cards in the group. The indicator type (checkbox or radio) is automatically determined by the selectionMode setting.
