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.
Implementation
SystemMessage API
Common Examples
Basic Usage
Interactive prompt with radio options:import { SystemMessage } from "@servicetitan/anvil2-ext-atlas";
function SystemMessageExample() {
const [selected, setSelected] = useState("");
return (
<SystemMessage
message="How would you like to proceed?"
radioOptions={[
{ value: "continue", label: "Continue", description: "Proceed with current settings" },
{ value: "modify", label: "Modify", description: "Change the settings first" },
]}
selectedValue={selected}
onRadioChange={setSelected}
buttonText="Confirm"
onSubmit={() => handleSubmit(selected)}
/>
);
}
With Disabled Submit
Disable submit until selection is made:import { SystemMessage } from "@servicetitan/anvil2-ext-atlas";
function SystemMessageDisabled() {
const [selected, setSelected] = useState("");
return (
<SystemMessage
message="Choose an option to continue"
radioOptions={options}
selectedValue={selected}
onRadioChange={setSelected}
buttonText="Continue"
onSubmit={() => handleSubmit(selected)}
buttonDisabled={!selected}
/>
);
}
<SystemMessage
message="Select an option"
radioOptions={options}
selectedValue={selected}
onRadioChange={setSelected}
buttonText="Confirm"
onSubmit={handleSubmit}
buttonDisabled={false}
/>
SystemMessage Props
Text to display on the submit button.
The prompt message to display.
onRadioChange
(value: string) => void
required
Callback fired when the selected option changes.
Callback fired when the submit button is clicked.
radioOptions
Array<{ label: string; description?: string; value: string }>
required
Array of options to display as radio buttons.
The currently selected option value.
When true, disables the submit button.
Additional CSS class name for custom styling.
