cotton

Checkbox

Traditional and versatile checkbox inputs for selecting multiple options. 

<c-ui.checkbox.group name="features" label="Select features">
    <c-ui.checkbox value="analytics" label="Analytics dashboard" />
    <c-ui.checkbox value="reports" label="Custom reports" />
    <c-ui.checkbox value="api" label="API access" />
</c-ui.checkbox.group>
{% cotton ui.checkbox.group name="features" label="Select features" %}
    {% cotton ui.checkbox value="analytics" label="Analytics dashboard" /%}
    {% cotton ui.checkbox value="reports" label="Custom reports" /%}
    {% cotton ui.checkbox value="api" label="API access" /%}
{% endcotton %}

With Descriptions

Add contextual information to each option with the description attribute.

<c-ui.checkbox.group name="notifications" label="Notification preferences">
    <c-ui.checkbox
        value="email"
        label="Email notifications"
        description="Receive updates via email" />
    <c-ui.checkbox
        value="sms"
        label="SMS notifications"
        description="Get text messages for urgent updates" />
    <c-ui.checkbox
        value="push"
        label="Push notifications"
        description="Browser and mobile push notifications" />
</c-ui.checkbox.group>
{% cotton ui.checkbox.group name="notifications" label="Notification preferences" %}
    {% cotton ui.checkbox
        value="email"
        label="Email notifications"
        description="Receive updates via email"
    /%}
    {% cotton ui.checkbox
        value="sms"
        label="SMS notifications"
        description="Get text messages for urgent updates"
    /%}
    {% cotton ui.checkbox
        value="push"
        label="Push notifications"
        description="Browser and mobile push notifications"
    /%}
{% endcotton %}

Horizontal Layout

Add horizontal to lay the checkboxes out in a wrapping row instead of stacking them.

<c-ui.checkbox.group name="days" label="Available days" horizontal>
    <c-ui.checkbox value="mon" label="Monday" />
    <c-ui.checkbox value="tue" label="Tuesday" />
    <c-ui.checkbox value="wed" label="Wednesday" />
    <c-ui.checkbox value="thu" label="Thursday" />
    <c-ui.checkbox value="fri" label="Friday" />
</c-ui.checkbox.group>
{% cotton ui.checkbox.group name="days" label="Available days" horizontal %}
    {% cotton ui.checkbox value="mon" label="Monday" /%}
    {% cotton ui.checkbox value="tue" label="Tuesday" /%}
    {% cotton ui.checkbox value="wed" label="Wednesday" /%}
    {% cotton ui.checkbox value="thu" label="Thursday" /%}
    {% cotton ui.checkbox value="fri" label="Friday" /%}
{% endcotton %}

Checked by Default

Set initial checked values using the :values prop on the group.

<c-ui.checkbox.group name="permissions" label="User permissions" :values="['read', 'write']">
    <c-ui.checkbox value="read" label="Read" />
    <c-ui.checkbox value="write" label="Write" />
    <c-ui.checkbox value="delete" label="Delete" />
    <c-ui.checkbox value="admin" label="Admin" />
</c-ui.checkbox.group>
{% cotton ui.checkbox.group name="permissions" label="User permissions" :values="['read', 'write']" %}
    {% cotton ui.checkbox value="read" label="Read" /%}
    {% cotton ui.checkbox value="write" label="Write" /%}
    {% cotton ui.checkbox value="delete" label="Delete" /%}
    {% cotton ui.checkbox value="admin" label="Admin" /%}
{% endcotton %}

Disabled

Disable individual checkboxes with the disabled attribute.

<c-ui.checkbox.group name="services" label="Available services">
    <c-ui.checkbox value="web" label="Web hosting" />
    <c-ui.checkbox value="email" label="Email service" />
    <c-ui.checkbox value="backup" label="Backup service" disabled />
    <c-ui.checkbox value="ssl" label="SSL certificate" disabled />
</c-ui.checkbox.group>
{% cotton ui.checkbox.group name="services" label="Available services" %}
    {% cotton ui.checkbox value="web" label="Web hosting" /%}
    {% cotton ui.checkbox value="email" label="Email service" /%}
    {% cotton ui.checkbox value="backup" label="Backup service" disabled /%}
    {% cotton ui.checkbox value="ssl" label="SSL certificate" disabled /%}
{% endcotton %}

Segmented

Display checkboxes as a horizontal button group with variant="segmented".

<c-ui.checkbox.group name="filters" label="Apply filters" variant="segmented">
    <c-ui.checkbox value="active" label="Active" />
    <c-ui.checkbox value="pending" label="Pending" />
    <c-ui.checkbox value="archived" label="Archived" />
</c-ui.checkbox.group>
{% cotton ui.checkbox.group name="filters" label="Apply filters" variant="segmented" %}
    {% cotton ui.checkbox value="active" label="Active" /%}
    {% cotton ui.checkbox value="pending" label="Pending" /%}
    {% cotton ui.checkbox value="archived" label="Archived" /%}
{% endcotton %}

Checkbox Cards

Display options as interactive cards with variant="cards". Perfect for visually distinct choices.

<c-ui.checkbox.group name="addons" label="Select add-ons" variant="cards">
    <c-ui.checkbox
        value="cdn"
        label="CDN"
        description="Global content delivery" />
    <c-ui.checkbox
        value="security"
        label="Security"
        description="DDoS protection" />
    <c-ui.checkbox
        value="monitoring"
        label="Monitoring"
        description="24/7 uptime monitoring" />
</c-ui.checkbox.group>
{% cotton ui.checkbox.group name="addons" label="Select add-ons" variant="cards" %}
    {% cotton ui.checkbox
        value="cdn"
        label="CDN"
        description="Global content delivery"
    /%}
    {% cotton ui.checkbox
        value="security"
        label="Security"
        description="DDoS protection"
    /%}
    {% cotton ui.checkbox
        value="monitoring"
        label="Monitoring"
        description="24/7 uptime monitoring"
    /%}
{% endcotton %}

Vertical Cards

Stack cards vertically by adding class="flex-col" to the group.

<c-ui.checkbox.group name="integrations" label="Enable integrations" variant="cards" class="flex-col">
    <c-ui.checkbox
        value="slack"
        label="Slack"
        description="Connect your workspace for notifications" />
    <c-ui.checkbox
        value="github"
        label="GitHub"
        description="Sync repositories and issues" />
    <c-ui.checkbox
        value="jira"
        label="Jira"
        description="Import tickets and track progress" />
</c-ui.checkbox.group>
{% cotton ui.checkbox.group name="integrations" label="Enable integrations" variant="cards" class="flex-col" %}
    {% cotton ui.checkbox
        value="slack"
        label="Slack"
        description="Connect your workspace for notifications"
    /%}
    {% cotton ui.checkbox
        value="github"
        label="GitHub"
        description="Sync repositories and issues"
    /%}
    {% cotton ui.checkbox
        value="jira"
        label="Jira"
        description="Import tickets and track progress"
    /%}
{% endcotton %}

Cards With Icons

Enhance cards with icons for better visual recognition.

<c-ui.checkbox.group name="export" label="Export formats" variant="cards" class="flex-col">
    <c-ui.checkbox
        value="pdf"
        label="PDF"
        description="Portable Document Format"
        icon="document" />
    <c-ui.checkbox
        value="csv"
        label="CSV"
        description="Comma-separated values"
        icon="table" />
    <c-ui.checkbox
        value="json"
        label="JSON"
        description="JavaScript Object Notation"
        icon="code" />
</c-ui.checkbox.group>
{% cotton ui.checkbox.group name="export" label="Export formats" variant="cards" class="flex-col" %}
    {% cotton ui.checkbox
        value="pdf"
        label="PDF"
        description="Portable Document Format"
        icon="document"
    /%}
    {% cotton ui.checkbox
        value="csv"
        label="CSV"
        description="Comma-separated values"
        icon="table"
    /%}
    {% cotton ui.checkbox
        value="json"
        label="JSON"
        description="JavaScript Object Notation"
        icon="code"
    /%}
{% endcotton %}

Custom Content

Use slots to create fully custom checkbox content with any HTML structure.

<c-ui.checkbox.group name="plans" variant="cards" class="flex-col" :values="['pro']">
    <c-ui.checkbox value="starter">
        <div class="flex items-start gap-4 flex-1">
            <!-- Checkbox indicator -->
            <div class="flex items-center h-5">...</div>

            <!-- Custom content -->
            <div class="flex-1">
                <div class="flex items-center justify-between">
                    <h3>Starter Plan</h3>
                    <span class="text-accent">$9/mo</span>
                </div>
                <p>Perfect for individuals</p>
                <ul class="mt-3 space-y-1">
                    <li>5 GB storage</li>
                    <li>1 user</li>
                </ul>
            </div>
        </div>
    </c-ui.checkbox>
    <c-ui.checkbox value="pro">
        <div class="flex items-start gap-4 flex-1">
            <!-- Checkbox indicator -->
            <div class="flex items-center h-5">...</div>

            <!-- Custom content -->
            <div class="flex-1">
                <div class="flex items-center justify-between">
                    <h3>Pro Plan</h3>
                    <span class="text-accent">$29/mo</span>
                </div>
                <p>Best for growing teams</p>
                <ul class="mt-3 space-y-1">
                    <li>50 GB storage</li>
                    <li>10 users</li>
                    <li>Priority support</li>
                </ul>
            </div>
        </div>
    </c-ui.checkbox>
</c-ui.checkbox.group>
{% cotton ui.checkbox.group name="plans" variant="cards" class="flex-col" :values="['pro']" %}
    {% cotton ui.checkbox value="starter" %}
        <div class="flex items-start gap-4 flex-1">
            <!-- Checkbox indicator -->
            <div class="flex items-center h-5">...</div>

            <!-- Custom content -->
            <div class="flex-1">
                <div class="flex items-center justify-between">
                    <h3>Starter Plan</h3>
                    <span class="text-accent">$9/mo</span>
                </div>
                <p>Perfect for individuals</p>
                <ul class="mt-3 space-y-1">
                    <li>5 GB storage</li>
                    <li>1 user</li>
                </ul>
            </div>
        </div>
    {% endcotton %}
    {% cotton ui.checkbox value="pro" %}
        <div class="flex items-start gap-4 flex-1">
            <!-- Checkbox indicator -->
            <div class="flex items-center h-5">...</div>

            <!-- Custom content -->
            <div class="flex-1">
                <div class="flex items-center justify-between">
                    <h3>Pro Plan</h3>
                    <span class="text-accent">$29/mo</span>
                </div>
                <p>Best for growing teams</p>
                <ul class="mt-3 space-y-1">
                    <li>50 GB storage</li>
                    <li>10 users</li>
                    <li>Priority support</li>
                </ul>
            </div>
        </div>
    {% endcotton %}
{% endcotton %}

As a field

Give the group any field attribute (label, description, error or badge) and it wraps itself in a Field component, giving you the label, helper text and error styling with no extra markup.

Choose the features to enable. 
<c-ui.checkbox.group
    name="features"
    label="Features"
    description="Choose the features to enable."
>
    <c-ui.checkbox value="analytics" label="Analytics dashboard" />
    <c-ui.checkbox value="reports" label="Custom reports" />
</c-ui.checkbox.group>
{% cotton ui.checkbox.group
    name="features"
    label="Features"
    description="Choose the features to enable."
%}
    {% cotton ui.checkbox value="analytics" label="Analytics dashboard" /%}
    {% cotton ui.checkbox value="reports" label="Custom reports" /%}
{% endcotton %}

API Reference

Checkbox Group Props

Name Description Type Options Default
name Form input name for the checkbox group str —
label Group label displayed above options str —
description Help text displayed below label str —
:values List of initially checked values (e.g. :values=&quot;['option1', 'option2']&quot;) list — []
variant Visual style of the checkbox group str
defaultsegmentedcards
default
:horizontal With the default variant, lays options out in a wrapping row instead of a vertical stack. bool
TrueFalse
False
class Additional CSS classes for the options container str —

Checkbox Props

Name Description Type Options Default
value Value submitted when this checkbox is checked str —
label Label text for the checkbox str —
description Additional descriptive text below the label str —
icon Icon name (for cards variant) str —
name Form input name (inherited from group if not specified) str —
:disabled Whether this checkbox is disabled bool
TrueFalse
False
:show_indicator Whether to show the checkbox indicator bool
TrueFalse
True
:accent Whether to use accent colors (True) or monochrome zinc colors (False) bool
TrueFalse
True

Slots

Name Description Type Options Default
slot (default) Custom content for the checkbox. When used, you have full control over the markup. — —