Checkbox

A control that allows the user to toggle between checked and not checked.

<twig:ui:Field orientation="horizontal" class="w-fit">
    <twig:ui:Checkbox id="terms" />
    <twig:ui:Field:Label for="terms">Accept terms and conditions</twig:ui:Field:Label>
</twig:ui:Field>

Usage

<twig:ui:Checkbox />

Examples

With label

<twig:ui:Field orientation="horizontal" class="mx-auto w-56">
    <twig:ui:Checkbox id="terms-basic" />
    <twig:ui:Field:Label for="terms-basic">Accept terms and conditions</twig:ui:Field:Label>
</twig:ui:Field>

Checked

By clicking this checkbox, you agree to the terms and conditions.

<twig:ui:Field orientation="horizontal" class="mx-auto w-72">
    <twig:ui:Checkbox id="terms-desc" checked />
    <twig:ui:Field:Content>
        <twig:ui:Field:Label for="terms-desc">Accept terms and conditions</twig:ui:Field:Label>
        <twig:ui:Field:Description>By clicking this checkbox, you agree to the terms and conditions.</twig:ui:Field:Description>
    </twig:ui:Field:Content>
</twig:ui:Field>

Disabled

<twig:ui:Field orientation="horizontal" data-disabled class="mx-auto w-56">
    <twig:ui:Checkbox id="toggle-disabled" disabled />
    <twig:ui:Field:Label for="toggle-disabled">Enable notifications</twig:ui:Field:Label>
</twig:ui:Field>

Invalid

<twig:ui:Checkbox aria-invalid="true" />

In a table

 Name Email Role
Sarah Chen [email protected] Admin
Marcus Rodriguez [email protected] User
Priya Patel [email protected] User 
<twig:ui:Table>
    <twig:ui:Table:Header>
        <twig:ui:Table:Row>
            <twig:ui:Table:Head class="w-8">
                <twig:ui:Checkbox id="select-all" />
            </twig:ui:Table:Head>
            <twig:ui:Table:Head>Name</twig:ui:Table:Head>
            <twig:ui:Table:Head>Email</twig:ui:Table:Head>
            <twig:ui:Table:Head>Role</twig:ui:Table:Head>
        </twig:ui:Table:Row>
    </twig:ui:Table:Header>
    <twig:ui:Table:Body>
        <twig:ui:Table:Row data-state="selected">
            <twig:ui:Table:Cell>
                <twig:ui:Checkbox id="row-1" checked />
            </twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="font-medium">Sarah Chen</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>[email protected]</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>Admin</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell>
                <twig:ui:Checkbox id="row-2" />
            </twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="font-medium">Marcus Rodriguez</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>[email protected]</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>User</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
        <twig:ui:Table:Row>
            <twig:ui:Table:Cell>
                <twig:ui:Checkbox id="row-3" />
            </twig:ui:Table:Cell>
            <twig:ui:Table:Cell class="font-medium">Priya Patel</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>[email protected]</twig:ui:Table:Cell>
            <twig:ui:Table:Cell>User</twig:ui:Table:Cell>
        </twig:ui:Table:Row>
    </twig:ui:Table:Body>
</twig:ui:Table>

RTL

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

API Reference

<twig:ui:Checkbox>

Renders a native <input type="checkbox">; any HTML attribute (id, checked, disabled, aria-invalid, ...) is passed through.