Skip to main content

Common Examples

Basic Usage

Present a single-select choice:
import { SingleRecommendationCard } from "@servicetitan/ext-atlas";

function SingleSelectExample() {
  const handleSubmit = (response) => {
    console.log("Selected:", response.optionIds[0]);
    console.log("Action:", response.actionId);
  };

  return (
    <SingleRecommendationCard
      recommendationId="rec-123"
      message="Which service would you like to schedule?"
      options={[
        { id: "opt-1", label: "HVAC Maintenance", description: "Annual checkup and filter replacement" },
        { id: "opt-2", label: "Plumbing Inspection", description: "Full system evaluation" },
        { id: "opt-3", label: "Electrical Review", description: "Safety inspection and testing" },
      ]}
      actions={[
        { id: "confirm", name: "Schedule", type: "primary" },
        { id: "cancel", name: "Cancel", type: "ghost" },
      ]}
      onSubmit={handleSubmit}
    />
  );
}

Submitted State

Show previously selected values:
import { SingleRecommendationCard } from "@servicetitan/ext-atlas";

function SubmittedExample() {
  return (
    <SingleRecommendationCard
      recommendationId="rec-123"
      message="Which service would you like?"
      options={options}
      actions={actions}
      onSubmit={() => {}}
      submitted={true}
      selected={["opt-2"]}
    />
  );
}
Last modified on February 12, 2026