> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Single Recommendation Card – Code
> SingleRecommendationCard presents a single-select choice using radio buttons.
export const LiveCode = ({children, customHeight, clickToLoad, example, fullWidth, fullHeight, hideCodeInLiveCode, screenshot, screenshotOnly, showCode: showCodeProp}) => {
const SCREENSHOTS_BASE = "https://servicetitan.github.io/anvil2-docs-live-code/screenshots";
const STACKBLITZ_BASE = "https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples";
const [showCodeBlock, setShowCodeBlock] = useState(showCodeProp ?? false);
const [isLocalOverride, setIsLocalOverride] = useState(false);
useEffect(() => {
const examplePath = `/images/live-code-screenshots-tmp/${example}.png`;
fetch(examplePath, {
method: "HEAD"
}).then(r => {
if (r.ok) setIsLocalOverride(true);
}).catch(() => {});
}, [example]);
const screenshotBase = isLocalOverride ? "/images/live-code-screenshots-tmp" : SCREENSHOTS_BASE;
if (screenshotOnly) {
return
;
}
if (screenshot) {
return
{!showCodeProp ?
: null}
StackBlitz demo
;
}
};
```tsx lines expandable theme={null}
import { SingleRecommendationCard } from "@servicetitan/anvil2-ext-atlas";
import { Card } from "@servicetitan/anvil2";
function App() {
return (
console.log("submitted:", data)}
/>
);
}
export default App;
```
## Common Examples
### Basic Usage
Present a single-select choice:
```tsx theme={null}
import { SingleRecommendationCard } from "@servicetitan/anvil2-ext-atlas";
function SingleSelectExample() {
const handleSubmit = (response) => {
console.log("Selected:", response.optionIds[0]);
console.log("Action:", response.actionId);
};
return (
);
}
```
### Submitted State
Show previously selected values:
```tsx theme={null}
import { SingleRecommendationCard } from "@servicetitan/anvil2-ext-atlas";
function SubmittedExample() {
return (
{}}
submitted={true}
selected={["opt-2"]}
/>
);
}
```
```tsx theme={null}
```
## `SingleRecommendationCard` Props
Array of action buttons with `id`, `name`, and optional `type`.
The prompt message to display above the options.
Callback fired when an action button is clicked. Receives `sourceMessageId`, `optionIds`, and `actionId`.
Array of selectable options with `id`, `label`, and optional `description`.
Unique identifier for this recommendation, included in the submit response.
Array of selected option IDs to display when `submitted` is true.
When true, disables all inputs and shows the selected state.
## Options Interface
```tsx theme={null}
interface Options {
id: string;
label: string;
description?: string;
value?: string;
}
```
## RecommendationAction Interface
```tsx theme={null}
interface RecommendationAction {
id: string;
name: string;
type?: "primary" | "secondary" | "ghost" | "danger" | "link";
url?: string;
}
```
## ConfirmationResponse Interface
```tsx theme={null}
interface ConfirmationResponse {
sourceMessageId?: string;
optionIds: string[];
actionId: string;
parameters?: Record;
}
```
