Boson
Packagist GitHub

Checkbox

Checkbox input with label, description, icon, and group variants for single or multi-select layouts.

Basic checkbox

<x-boson::checkbox name="agree" label="I agree to the terms" />

With description

<x-boson::checkbox name="newsletter" label="Email notifications" description="Receive weekly updates about new features and changes." />

Checked by default

<x-boson::checkbox name="remember" label="Remember me" :checked="true" />

With icon

<x-boson::checkbox name="secure" label="Enable two-factor authentication" icon="lock-closed" />

With emoji

<x-boson::checkbox name="mood" value="happy" label="Happy" emoji="😊" />

Checkbox group

Notifications
<x-boson::checkbox.group label="Notifications">
    <x-boson::checkbox name="notifications[]" value="email" label="Email" />
    <x-boson::checkbox name="notifications[]" value="sms" label="SMS" />
    <x-boson::checkbox name="notifications[]" value="push" label="Push" />
</x-boson::checkbox.group>

Cards variant

Plan features
<x-boson::checkbox.group label="Plan features" variant="cards">
    <x-boson::checkbox name="features[]" value="analytics" label="Analytics" description="Track usage and performance" icon="chart-bar" />
    <x-boson::checkbox name="features[]" value="api" label="API access" description="Integrate with external services" icon="code-bracket" />
    <x-boson::checkbox name="features[]" value="support" label="Priority support" description="Get help within 24 hours" icon="lifebuoy" />
</x-boson::checkbox.group>

Pills variant

Tags
<x-boson::checkbox.group label="Tags" variant="pills">
    <x-boson::checkbox name="tags[]" value="laravel" label="Laravel" />
    <x-boson::checkbox name="tags[]" value="vue" label="Vue" />
    <x-boson::checkbox name="tags[]" value="tailwind" label="Tailwind" />
    <x-boson::checkbox name="tags[]" value="alpine" label="Alpine" />
</x-boson::checkbox.group>

Buttons variant

Permissions
<x-boson::checkbox.group label="Permissions" variant="buttons">
    <x-boson::checkbox name="permissions[]" value="read" label="Read" />
    <x-boson::checkbox name="permissions[]" value="write" label="Write" />
    <x-boson::checkbox name="permissions[]" value="admin" label="Admin" />
</x-boson::checkbox.group>

Tiles variant

Interests
<x-boson::checkbox.group label="Interests" variant="tiles">
    <x-boson::checkbox name="interests[]" value="music" label="Music" emoji="🎵" />
    <x-boson::checkbox name="interests[]" value="sports" label="Sports" emoji="⚽" />
    <x-boson::checkbox name="interests[]" value="travel" label="Travel" emoji="✈️" />
    <x-boson::checkbox name="interests[]" value="food" label="Food" emoji="🍕" />
</x-boson::checkbox.group>

Inside a card

Privacy settings

<x-boson::card>
    <h3 class="text-lg font-semibold mb-4">Privacy settings</h3>
    <div class="space-y-3">
        <x-boson::checkbox name="profile_visible" label="Public profile" description="Allow others to see your profile" :checked="true" />
        <x-boson::checkbox name="show_email" label="Show email" description="Display your email on your profile" />
        <x-boson::checkbox name="show_activity" label="Activity status" description="Show when you are online" :checked="true" />
    </div>
</x-boson::card>

Checkbox Props

Prop Type Default Description
name string null Input name attribute. Use array syntax (e.g. items[]) for multi-select groups
value string null The value submitted when the checkbox is checked
checked boolean false Whether the checkbox is checked by default
label string null Label text displayed next to the checkbox
description string null Helper text displayed below the label
icon string null Heroicon name displayed beside the checkbox
image string null Image URL displayed beside the checkbox
emoji string null Emoji character displayed beside the checkbox

Checkbox Group Props

Prop Type Default Description
label string null Group label displayed above the checkboxes
variant string null Visual style: cards, pills, buttons, or tiles
size string null Size modifier for the group items