;
}
};
```tsx lines expandable theme={null}
import { SelectCard, Grid, Text, Chip } from "@servicetitan/anvil2";
function App() {
return (
console.log("clicked")}>
Cooling Tune Up#4567-110:30 AM
);
}
export default App;
```
## Common Examples
```tsx theme={null}
import { Chip, Grid, SelectCard, Text } from "@servicetitan/anvil2";
const data = [/*...data for select cards...*/]
function ExampleComponent() {
return (
{
console.log(e);
}}
>
{data.map((item) => (
{item.label}{item.cost}{item.timeEstimate}
))}
);
}
```
### 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`.
```tsx lines expandable theme={null}
import { SelectCard, Grid, Text, Chip } from "@servicetitan/anvil2";
function App() {
return (
console.log("clicked")} errored>
Cooling Tune Up#4567-110:30 AM
);
}
export default App;
```
### 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`.
```tsx lines expandable theme={null}
import { Chip, Grid, SelectCard, Text } from "@servicetitan/anvil2";
function App() {
return (
{[
{
id: "1",
label: "Cooling Tune Up",
cost: "$100",
timeEstimate: "1 hour",
},
{
id: "2",
label: "Heating Tune Up",
cost: "$150",
timeEstimate: "2 hours",
},
{
id: "3",
label: "Air Duct Cleaning",
cost: "$200",
timeEstimate: "3 hours",
},
].map((item) => (
{item.label}
~{item.timeEstimate}
))}
);
}
export default App;
```
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.
```tsx lines expandable theme={null}
import { useState } from "react";
import { SelectCard, Flex, Text } from "@servicetitan/anvil2";
function App() {
const [selected, setSelected] = useState>(["A"]);
return (
{
if (!state?.id) return;
setSelected(state.checked ? [state.id] : []);
}}
>
WalkingBikingDriving
);
}
export default App;
```
### 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.
```tsx lines expandable theme={null}
import { SelectCard, Flex, Text } from "@servicetitan/anvil2";
function App() {
return (
{
console.log(e);
}}
>
WalkingBikingDriving
);
}
export default App;
```
```tsx theme={null}
import { SelectCard } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
console.log(value)}
defaultChecked={false}
disabled={false}
errored={false}
>
Card content
); }
```
## `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 initial checked state. Ignored when inside a `SelectCard.Group` that sets `defaultValue`.
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.
```tsx theme={null}
import { SelectCard } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
{}}>
Card content
);
}
```
## `SelectCard.Group` Props
Sets the legend on the group.
Sets how many cards the user can select: `"single"` uses radio buttons, `"multiple"` uses checkboxes.
Associates the legend with content below.
Initial selection state for uncontrolled usage. Array of `SelectCard` ids that are selected on first render. Takes precedence over individual `SelectCard` `defaultChecked` props.
`}>
Additional props to pass to the legend [FieldLabel](/docs/web/components/field-label/code) component. Supports the `aiMark` prop for displaying [AI-powered field indicators](/docs/web/utilities/ai-marks).
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.
Controlled selection state. Array of `SelectCard` ids that are currently selected. When provided, the group becomes controlled and selection must be managed via `onChange`.
