Forms
Switch
The on/off control for settings that apply immediately (Radix Switch): a 32 × 18px pill, input track off, primary on, 16px thumb with a double-bounce (.t-toggle, 350ms thumb, 150ms track).
Guidelines#
Use it for preferences that take effect as soon as they change — warm-up, stop on reply, notifications. Use a Checkbox when the change waits for Save.
What you provide: checked/onCheckedChange or defaultChecked, id for its Label, aria-describedby for the help line, and disabled when someone else manages the setting (say who in the help line). Put it at the end of a row: title and help on the left, switch on the right.
Motion: the bounce plays only after the first user toggle (.is-init), never on first paint.
Shared package: @digitalcrew/ui ships a larger native switch (44 × 24px, crew-switch classes, 2px ring outline) used by the Appearance settings in both apps; its CSS is in bundle.css.
Note: the off track (input) sits under 3:1 against the page; the label carries the state.
Facts#
| Group | Forms |
|---|---|
| Product | Max |
| Global | window.DigitalCrew.Switch |
| Source | max-agent: src/components/ui/switch.tsx |
| Import in the app | import { Switch } from "@/components/ui/switch"; |
API#
TypeScript declarations emitted from src/components/ui/switch.tsx (the module also exports its other parts).
declare function Switch({ className, checked, defaultChecked, onCheckedChange, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>): any;
export { Switch };Example#
The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.
<div id="root" class="p-6"></div>
<script>
(function () {
var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function Row(id, title, help, props) {
return h("div", { className: "flex items-center justify-between gap-6 rounded-lg border p-4" },
h("div", { className: "grid gap-1" },
h(DC.Label, { htmlFor: id }, title),
h("p", { id: id + "-help", className: "text-sm text-muted-foreground" }, help)),
h(DC.Switch, Object.assign({ id: id, "aria-describedby": id + "-help" }, props)));
}
function App() {
return h("div", { className: "grid gap-3 max-w-xl" },
Row("sw-1", "Email warm-up", "Builds sender reputation before a campaign goes out.", { defaultChecked: true }),
Row("sw-2", "Stop on reply", "Pause the sequence for anyone who answers.", {}),
Row("sw-3", "Workspace branding", "Managed by your workspace owner.", { disabled: true }));
}
ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>