Forms

radio

Native radio input styled to the theme.

<div class="space-y-2">
    <div class="flex items-center gap-2">
        <x-ui.radio id="r1" name="plan" value="free" checked />
        <x-ui.label for="r1">Free</x-ui.label>
    </div>
    <div class="flex items-center gap-2">
        <x-ui.radio id="r2" name="plan" value="pro" />
        <x-ui.label for="r2">Pro</x-ui.label>
    </div>
</div>

Installation

php artisan ui:add radio

1. Install dependencies

  • composer: gehrisandro/tailwind-merge-laravel

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

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

@props([])

@php
    $classes = \TailwindMerge\Laravel\Facades\TailwindMerge::merge(
        'aspect-square size-4 shrink-0 rounded-full border border-input bg-transparent accent-primary text-primary shadow-xs outline-none transition-[color,box-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="radio"
    {{ $attributes->except('class')->merge(['class' => $classes]) }} />

Usage

<x-ui.radio id="free" name="plan" value="free" checked />

Use a shared `name` for a radio group.