Recipe

Settings panel

A compact settings panel for forms, binary controls, and account-level status.

Preview

Workspace

Notification settings

Control how billing updates reach the team.

Workspace nameShown in receipts and exports.Renewal receiptsSend a receipt after each renewal.Include billing contactCopy the account owner on payment emails.

Renewal scheduled

The card on file renews on June 18.

Ingredients

The recipe only uses documented Axie primitives.

CardFieldInputSwitchCheckboxAlert

Accessibility

Keep labels visible above every input and include helper text when the field changes billing or notification behavior.
Use native checkbox and switch controls so keyboard users can move through the panel without custom key handling.
Reserve the alert for account-level state, not routine helper copy.

Code

code

<Card variant="surface">  <CardHeader>    <Badge tone="accent">Workspace</Badge>    <CardTitle>Notification settings</CardTitle>    <CardDescription>Control how billing updates reach the team.</CardDescription>  </CardHeader>  <CardContent className="grid gap-4">    <Field label="Workspace name" helper="Shown in receipts and exports.">      <Input defaultValue="North Pier Ops" />    </Field>    <Switch defaultChecked label="Renewal receipts" description="Send a receipt after each renewal." />    <Checkbox label="Include billing contact" description="Copy the account owner on payment emails." />    <Alert title="Renewal scheduled" description="The card on file renews on June 18." tone="info" />  </CardContent></Card>