Inputs

Switch

Turns a setting on or off immediately, like a light switch.

npx prodular-ui add switch

Settings list

Auto-assign new tickets

Round robin across agents who are online.

Close resolved tickets after 7 days

Customers can reopen them by replying.

Single sign-on

Available on the Scale plan.

import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field"import { Switch } from "@/components/ui/switch"
export default function SwitchDefault() {  return (    <FieldGroup className="max-w-md gap-5">      <Field orientation="horizontal">        <FieldContent>          <FieldLabel>Auto-assign new tickets</FieldLabel>          <FieldDescription>Round robin across agents who are online.</FieldDescription>        </FieldContent>        <Switch defaultChecked />      </Field>      <Field orientation="horizontal">        <FieldContent>          <FieldLabel>Close resolved tickets after 7 days</FieldLabel>          <FieldDescription>Customers can reopen them by replying.</FieldDescription>        </FieldContent>        <Switch />      </Field>      <Field orientation="horizontal" disabled>        <FieldContent>          <FieldLabel>Single sign-on</FieldLabel>          <FieldDescription>Available on the Scale plan.</FieldDescription>        </FieldContent>        <Switch />      </Field>    </FieldGroup>  )}

Sizes

Compact rows

Show weekends

import { Field, FieldLabel } from "@/components/ui/field"import { Switch } from "@/components/ui/switch"
export default function SwitchSizes() {  return (    <div className="flex flex-wrap items-center justify-center gap-8">      <Field orientation="horizontal" className="w-auto">        <Switch size="sm" defaultChecked />        <FieldLabel className="text-[13px]">Compact rows</FieldLabel>      </Field>      <Field orientation="horizontal" className="w-auto">        <Switch defaultChecked />        <FieldLabel>Show weekends</FieldLabel>      </Field>    </div>  )}

Anatomy

<Field orientation="horizontal">  <FieldContent>    <FieldLabel>Auto-assign new tickets</FieldLabel>    <FieldDescription>Round robin across agents who are online.</FieldDescription>  </FieldContent>  <Switch defaultChecked /></Field>

Guidance

Use it when

Settings that take effect as soon as they change, with no save button.

Avoid

Choices inside a form that is saved later. Use Checkbox.
Labels that describe both states (On or off). Name the setting instead.

Rules for AI agents

Published in llms-full.txt and the registry, so coding agents follow them when they build with this component.

Place it in Field orientation="horizontal" with FieldContent (label and description) first and the Switch last, so switches line up on the right.
Save the change right away and show a toast if it fails. Do not wait for a submit button.
Use size sm only in dense tables and toolbars.

API

Switch

Prop	Type	Default	Description
checked / defaultChecked	boolean		Controlled or initial state.
onCheckedChange	(checked: boolean) => void		Called when toggled.
size	"sm" \| "default"	"default"	Track size.