Skip to main content

Forms

Radio code

Copy the implementation or inspect every file that belongs to this component unit.

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

@props([
    'label' => null,
    'description' => null,
    'disabled' => false,
])

@php
    /*
    | Radio input with optional inline label + description.
    |
    | Usage:
    |   <x-ui.radio name="plan" value="pro" label="Pro" description="$29/mo" />
    */
    $id = $attributes->get('id') ?? 'rb_'.\Illuminate\Support\Str::random(6);
@endphp

<label for="{{ $id }}" {{ $attributes->only('class')->merge(['class' => 'flex items-start gap-3 '.($disabled ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer')]) }}>
    <input
        id="{{ $id }}"
        type="radio"
        @disabled($disabled)
        {{ $attributes->except('class')->merge(['class' => 'mt-0.5 h-4 w-4 border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-brand-600 shadow-sm focus:ring-brand-500 focus:ring-offset-0 transition']) }}
    >
    @if ($label || $description)
        <span class="text-sm">
            @if ($label)
                <span class="font-medium text-gray-800 dark:text-gray-200">{{ $label }}</span>
            @endif
            @if ($description)
                <span class="block text-gray-500 dark:text-gray-400">{{ $description }}</span>
            @endif
        </span>
    @endif
</label>