Select Card

Implementation
SelectCard Props
SelectCard.Group Props

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.

Controlled State

Use value on SelectCard.Group to control the selection externally. The component will not update its selection on its own — you must update value in the onChange callback.

Default Selection

Use defaultValue to pre-select cards when the group is uncontrolled. The selection can still be changed by the user after the initial render.

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

string | number

required

A unique identifier for the card, used to track the selection state.

checked

boolean

Controlled checked state.

checkboxProps

Passes props to the underlying Checkbox component.

defaultChecked

boolean

Uncontrolled initial checked state. Ignored when inside a SelectCard.Group that sets defaultValue.

disabled

boolean

When true, disables the card.

errored

boolean

When true, sets error styling on the card.

onChange

(value: boolean) => void

Function called on selection state change.

radioProps

Passes props to the underlying Radio component.

removeDropShadow

boolean

Removes the drop shadow effect on the card.

showSelectIndicator

boolean

default:"false"

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"
      selectionMode="multiple"
      defaultValue={["card-1"]}
      required={false}
      ariaLabelledBy="group-label"
    >
      <SelectCard id="card-1" onChange={() => {}}>
        Card content
      </SelectCard>
    </SelectCard.Group>
  );
}

`SelectCard.Group` Props

legend

ReactNode

required

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.

ariaLabelledBy

string

Associates the legend with content below.

children

ReactNode

defaultValue

Array<string | number>

Initial selection state for uncontrolled usage. Array of SelectCard ids that are selected on first render. Takes precedence over individual SelectCard defaultChecked props.

legendProps

Additional props to pass to the legend FieldLabel component. Supports the aiMark prop for displaying AI-powered field indicators.

onChange

(e: ChangeEvent, state: { id: string | number; checked: boolean }) => void

Callback function triggered when the selection state changes.

required

boolean

default:"false"

When true, sets “required” text in label. This does not enforce error when nothing is selected.

showSelectIndicator

boolean

default:"false"

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.

value

Array<string | number>

Controlled selection state. Array of SelectCard ids that are currently selected. When provided, the group becomes controlled and selection must be managed via onChange.

​Common Examples

​SelectCard Components

​Validation

​Select Indicator Visual

​Controlled State

​Default Selection

​SelectCard Props

​SelectCard.Group Props

Common Examples

SelectCard Components

Validation

Select Indicator Visual

Controlled State

Default Selection

`SelectCard` Props

`SelectCard.Group` Props