blatui

Components

Checkbox

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

php artisan blatui:add checkbox 
<div class="flex items-center gap-2">
    <x-ui.checkbox id="terms" />
    <x-ui.label for="terms">Accept terms and conditions</x-ui.label>
</div>

Circular

{{-- Fully rounded checkboxes. --}}
<div class="flex flex-wrap items-center gap-5">
    <div class="flex items-center gap-2">
        <x-ui.checkbox id="cb-round-1" class="rounded-full" />
        <x-ui.label for="cb-round-1">Unchecked</x-ui.label>
    </div>
    <div class="flex items-center gap-2">
        <x-ui.checkbox id="cb-round-2" checked class="rounded-full" />
        <x-ui.label for="cb-round-2">Checked</x-ui.label>
    </div>
    <div class="flex items-center gap-2">
        <x-ui.checkbox id="cb-round-3" checked class="size-5 rounded-full data-[state=checked]:bg-success data-[state=checked]:border-success dark:data-[state=checked]:bg-success" />
        <x-ui.label for="cb-round-3">Large</x-ui.label>
    </div>
</div>

Colors

{{-- Checked-state colours via class overrides on the semantic tokens. --}}
<div class="flex flex-wrap items-center gap-5">
    <div class="flex items-center gap-2">
        <x-ui.checkbox id="cb-success" checked class="data-[state=checked]:bg-success data-[state=checked]:border-success dark:data-[state=checked]:bg-success" />
        <x-ui.label for="cb-success">Success</x-ui.label>
    </div>
    <div class="flex items-center gap-2">
        <x-ui.checkbox id="cb-info" checked class="data-[state=checked]:bg-info data-[state=checked]:border-info dark:data-[state=checked]:bg-info" />
        <x-ui.label for="cb-info">Info</x-ui.label>
    </div>
    <div class="flex items-center gap-2">
        <x-ui.checkbox id="cb-warning" checked class="data-[state=checked]:bg-warning data-[state=checked]:border-warning dark:data-[state=checked]:bg-warning" />
        <x-ui.label for="cb-warning">Warning</x-ui.label>
    </div>
    <div class="flex items-center gap-2">
        <x-ui.checkbox id="cb-danger" checked class="data-[state=checked]:bg-destructive data-[state=checked]:border-destructive dark:data-[state=checked]:bg-destructive" />
        <x-ui.label for="cb-danger">Danger</x-ui.label>
    </div>
</div>

Disabled

<div class="flex items-center gap-2">
    <x-ui.checkbox id="terms-disabled" disabled />
    <x-ui.label for="terms-disabled">Accept terms and conditions</x-ui.label>
</div>

Indeterminate

<div class="flex items-center gap-2">
    <x-ui.checkbox id="cb-indeterminate" indeterminate />
    <x-ui.label for="cb-indeterminate">Select all</x-ui.label>
</div>

List

<div class="flex flex-col gap-3">
    <div class="flex items-center gap-2">
        <x-ui.checkbox id="cb-recents" checked />
        <x-ui.label for="cb-recents">Recents</x-ui.label>
    </div>
    <div class="flex items-center gap-2">
        <x-ui.checkbox id="cb-home" checked />
        <x-ui.label for="cb-home">Home</x-ui.label>
    </div>
    <div class="flex items-center gap-2">
        <x-ui.checkbox id="cb-apps" />
        <x-ui.label for="cb-apps">Applications</x-ui.label>
    </div>
    <div class="flex items-center gap-2">
        <x-ui.checkbox id="cb-desktop" disabled />
        <x-ui.label for="cb-desktop">Desktop</x-ui.label>
    </div>
</div>

Native

{{-- native: a real <input type=checkbox> styled via the .blat-checkbox utility — submits
     without JS, name-bound. Use the default (Alpine) checkbox if you need indeterminate. --}}
<div class="flex items-center gap-2">
    <x-ui.checkbox native id="terms" name="terms" :checked="true" />
    <x-ui.label for="terms">Accept terms &amp; conditions</x-ui.label>
</div>

Utility Class

{{-- Raw checkbox styled by the .blat-checkbox utility (native submit, name-bound). The .blat-*
     utilities (.blat-input/.blat-textarea/.blat-select/.blat-checkbox/.blat-radio) are the right
     primitive for server-rendered DX layers that wrap native controls. --}}
<label class="flex items-center gap-2 text-sm">
    <input type="checkbox" class="blat-checkbox" checked />
    Subscribe to product updates
</label>

With Text

You agree to our Terms of Service and Privacy Policy.

<div class="flex items-start gap-2">
    <x-ui.checkbox id="cb-terms-text" checked />
    <div class="grid gap-1.5 leading-none">
        <x-ui.label for="cb-terms-text">Accept terms and conditions</x-ui.label>
        <p class="text-muted-foreground text-sm">You agree to our Terms of Service and Privacy Policy.</p>
    </div>
</div>

Using with Livewire

wire:model

The examples above are the frontend (Blade + Alpine) usage. Inside a Livewire component, bind wire:model for two-way state — same component, no wrappers. Full Livewire guide →

app/Livewire/Demo.php 
use Livewire\Component;

class Demo extends Component
{
    public bool $accept = false;

    public function render()
    {
        return view('livewire.demo');
    }
}
resources/views/livewire/demo.blade.php 
<x-ui.checkbox wire:model="accept" />

API Reference

Props, slots and exposed methods for <x-ui.checkbox>.

Props

Prop Type Default Description
id string — Id for the control, so a label can target it with its for attribute.
name string — Form field name. When set, a hidden input carries the value so the checkbox submits with the form (only when checked).
value string 'on' Value submitted under "name" when the box is checked.
checked bool false Whether the checkbox starts checked.
disabled bool false Disables the control and dims it.
indeterminate bool false Starts in the mixed (dash) state, e.g. a parent of a partially-selected list. The first click resolves it to checked. Not supported with native.
native bool false Render a real <input type="checkbox"> (styled via accent-color) for no-JS or native-submit forms, instead of the default Alpine-driven button.