ISwitch ​

A toggle for a setting that takes effect immediately. Where the change is saved with the rest of a form, use ICheckbox.

<ISwitch v-model="notify" label="Email me when an invoice is paid" />

With a description ​

description sits under the label and is wired to the switch, so it is announced as part of the control.

<ISwitch
  v-model="digest"
  label="Weekly digest"
  description="A Monday summary of everything sent, paid and overdue."
/>

Sizes ​

The track, thumb and travel scale together.

<ISwitch v-model="enabled" size="sm" label="Small" />
<ISwitch v-model="enabled" size="md" label="Medium" />
<ISwitch v-model="enabled" size="lg" label="Large" />

Disabled ​

<ISwitch :model-value="true" disabled label="Locked on by your plan" />
<ISwitch :model-value="false" disabled label="Not available on this plan" />

Without a label ​

Leave label off and the switch renders alone. Give it an aria-label, or point a separate ILabel at it with id.

<ISwitch v-model="enabled" aria-label="Enable marketing emails" />

Props ​

disabled, required, name and value are forwarded to Reka UI's SwitchRoot, so the switch posts in a plain <form>.

Inside an IFormField the label, description and error come from the field — set them there rather than here.