checkbox

Native checkbox styled to the theme.

Accept terms and conditions

<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>

Installation

php artisan ui:add checkbox

1. Install dependencies

composer: gehrisandro/tailwind-merge-laravel

2. Copy the source into resources/views/components/ui/

resources/views/components/ui/checkbox.blade.php

@props([])

@php
    $classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
        'peer size-4 shrink-0 rounded-[4px] border border-input bg-transparent accent-primary shadow-xs outline-none transition-shadow disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-destructive/20',
        $attributes->get('class'),
    );
@endphp

<input type="checkbox"
    {{ $attributes->except('class')->merge(['class' => $classes]) }} />

Usage

<x-ui.checkbox id="terms" />

Pair with `<x-ui.label>` via id/for.

Props

Every prop with its default. Pass any of them as attributes, using : to bind a PHP value.

@props([])