Switch

A toggle switch component for binary on/off states.

Usage

<twig:ui:Switch/>

Examples

With label

<twig:ui:Field orientation="horizontal" class="w-fit">
    <twig:ui:Field:Label for="notifications-input">Notifications</twig:ui:Field:Label>
    <twig:ui:Switch id="notifications" />
</twig:ui:Field>

Checked

Receive occasional product updates and offers.

<twig:ui:Field orientation="horizontal" class="mx-auto w-72">
    <twig:ui:Field:Content>
        <twig:ui:Field:Label for="marketing-emails">Marketing emails</twig:ui:Field:Label>
        <twig:ui:Field:Description>Receive occasional product updates and offers.</twig:ui:Field:Description>
    </twig:ui:Field:Content>
    <twig:ui:Switch id="marketing-emails" checked />
</twig:ui:Field>

Sizes

<div class="flex items-center gap-6">
    <twig:ui:Switch id="size-sm" size="sm" checked />
    <twig:ui:Switch id="size-default" checked />
    <twig:ui:Switch id="size-lg" size="lg" checked />
</div>

Disabled

<twig:ui:Field orientation="horizontal" data-disabled class="w-fit">
    <twig:ui:Field:Label for="wifi-disabled">Wi-Fi</twig:ui:Field:Label>
    <twig:ui:Switch id="wifi-disabled" disabled />
</twig:ui:Field>

Invalid

<twig:ui:Switch invalid />

RTL

<div class="flex flex-col gap-6">
    <div dir="rtl" class="flex flex-col gap-4">
        <twig:ui:Field orientation="horizontal">
            <twig:ui:Field:Label for="terms-ar">قبول الشروط والأحكام</twig:ui:Field:Label>
            <twig:ui:Switch id="terms-ar" checked />
        </twig:ui:Field>
        <twig:ui:Field orientation="horizontal" data-disabled>
            <twig:ui:Field:Label for="toggle-ar">تفعيل الإشعارات</twig:ui:Field:Label>
            <twig:ui:Switch id="toggle-ar" disabled />
        </twig:ui:Field>
    </div>
    <div dir="rtl" class="flex flex-col gap-4">
        <twig:ui:Field orientation="horizontal">
            <twig:ui:Field:Label for="terms-he">קבל תנאים והגבלות</twig:ui:Field:Label>
            <twig:ui:Switch id="terms-he" checked />
        </twig:ui:Field>
        <twig:ui:Field orientation="horizontal" data-disabled>
            <twig:ui:Field:Label for="toggle-he">הדלק התראות</twig:ui:Field:Label>
            <twig:ui:Switch id="toggle-he" disabled />
        </twig:ui:Field>
    </div>
</div>

Programmatic toggle

Toggle a switch from a button elsewhere on the page using commandfor and command.

<div class="flex flex-col items-center gap-4">
    <twig:ui:Switch id="programmatic-switch" />
    <div class="flex gap-2">
        <twig:ui:Button size="sm" variant="outline" command="--check" commandfor="programmatic-switch">Turn on</twig:ui:Button>
        <twig:ui:Button size="sm" variant="outline" command="--uncheck" commandfor="programmatic-switch">Turn off</twig:ui:Button>
        <twig:ui:Button size="sm" variant="outline" command="--toggle" commandfor="programmatic-switch">Toggle</twig:ui:Button>
    </div>
</div>

API Reference

<twig:ui:Switch>

id is rendered on the root <label>, so it works directly with commandfor. The underlying <input> gets {id}-input; associate an external <twig:ui:Field:Label for="{id}-input"> with it.

Prop Type Description
id string The id rendered on the <label> root. The input gets {id}-input
checked boolean The initial checked state. Defaults to false
disabled boolean Disables the switch. Defaults to false
invalid boolean Marks the switch as invalid. Defaults to false
required boolean Marks the underlying input as required. Defaults to false
readOnly boolean Prevents toggling while keeping it focusable. Defaults to false
name string The input name, for form submission
value string The input value, for form submission. Defaults to on
form string The id of the form the input belongs to
dir 'ltr' | 'rtl' Overrides the inherited text direction
size 'sm' | 'default' | 'lg' The size of the switch. Defaults to default
Event Detail Description
hui:switch:change { checked: boolean } Dispatched whenever the checked state changes
Command Description
--check Sets the switch to checked
--uncheck Sets the switch to unchecked
--toggle Toggles the checked state