Select Card

For development, import SelectCard from @servicetitan/anvil2. For design, find it in the Anvil2 file.

Anatomy

The Select Card consists of six primary elements that work together to create a card-like checkbox or radio with customizable inner content.

Card surface - The interactive container that responds to user selection
Inner contents - Customizable content area for labels, descriptions, chips, or other elements
Selected state - Visual indicator showing the card is currently chosen
Errored state - Visual treatment indicating validation or selection errors
Focused state - Visual indicator showing keyboard focus
Focused & selected state - Combined visual treatment for focus and selection

Options

The Select Card supports the following configurations to accommodate various selection scenarios.

States

Default

Selected

Disabled

Errored

Drop Shadows

SelectCard has a drop shadow by default. You can optionally remove it for use in galleries and other dense layouts where shadows may create visual noise.

Select Indicator

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 selection mode of the parent group.

Behavior

The Select Card responds to user interaction with distinct visual states for selection, error, and focus.

Usage Guidelines

Standard	Requirement
DoCard-like checkbox or radio options	Use the Select Card when providing card-like checkbox or radio options with customizable inner content.
DoUse within a checkbox group	Use Select Cards within a checkbox group when users can select zero to many options.
DoUse within a radio group	Use Select Cards as options in a radio group where users must make a single selection from mutually exclusive options.
DoProvide a default option	Provide a default option when using Select Card within a Radio Group. Default selections signal that a selection is required, expedite task completion, and guide users toward a particular option.
Don’tUse for simple, text-only options	Select Card is for options that need rich content like descriptions, images, or chips. For simple text-only options in compact layouts, use Radio instead.
Don’tUse for space-efficient, simple lists	Select Card is for options that need visual prominence and additional context. For simple lists where space efficiency matters, use Checkbox instead.
Don’tDefault when it risks unexpected effects	Avoid default selections when they could result in unexpected downstream effects.

Content

Content within the Select Card should clearly communicate the option being selected. Keep inner content concise and scannable. Use labels, descriptions, chips, or other elements that help users quickly compare options.

Using Drop Shadows

In galleries and dense layouts, remove the drop shadow
In other contexts, keep the drop shadow for visual separation

Keyboard Interaction

Users can navigate the Select Card using standard keyboard controls.

Key	Interaction
Keyboard arrows	Move between Select Cards when implemented as a Radio Group
Tab	Move to the next Select Card when implemented as a Checkbox Group
Shift Tab	Move to the previous Select Card when implemented as a Checkbox Group
Space	Select card with focus when implemented as a Checkbox Group

Accessibility

Include Select Cards in a group with a descriptive legend
Provide clear, distinct content for each card to help users differentiate options
When a Select Card group has an error, include helper text to describe the error

Code

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.

boolean

Controlled checked state.

Omit<CheckboxProps, "label">

Passes props to the underlying Checkbox component.

boolean

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

boolean

When true, disables the card.

boolean

When true, sets error styling on the card.

(value: boolean) => void

Function called on selection state change.

Omit<RadioProps, "label">

Passes props to the underlying Radio component.

boolean

Removes the drop shadow effect on the card.

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

ReactNode

required

Sets the legend on the group.

"single" | "multiple"

required

Sets how many cards the user can select: "single" uses radio buttons, "multiple" uses checkboxes.

string

Associates the legend with content below.

ReactNode

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.

Omit<FieldLabelProps, "el">

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

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

Callback function triggered when the selection state changes.

boolean

default:"false"

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

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.

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.

Concepts & Guidelines

Anvil2

Resources

Select Card - Web

Anatomy

Options

States

Default

Selected

Disabled

Errored

Drop Shadows

Select Indicator

Behavior

Usage Guidelines

Content

Using Drop Shadows

Keyboard Interaction

Accessibility

Code

Common Examples

SelectCard Components

Validation

Select Indicator Visual

Controlled State

Default Selection

`SelectCard` Props

`SelectCard.Group` Props

​Anatomy

​Options

​States

​Default

​Selected

​Disabled

​Errored

​Drop Shadows

​Select Indicator

​Behavior

​Usage Guidelines

​Content

​Using Drop Shadows

​Keyboard Interaction

​Accessibility

​Code

​Common Examples

​SelectCard Components

​Validation

​Select Indicator Visual

​Controlled State

​Default Selection

​SelectCard Props

​SelectCard.Group Props

Anatomy

Options

States

Default

Selected

Disabled

Errored

Drop Shadows

Select Indicator

Behavior

Usage Guidelines

Content

Using Drop Shadows

Keyboard Interaction

Accessibility

Code

Common Examples

SelectCard Components

Validation

Select Indicator Visual

Controlled State

Default Selection

`SelectCard` Props

`SelectCard.Group` Props