Radio - Laravel Blade

Use the radio component to select a single option from a group, with support for colors, helper text, disabled state, and various layout options.

Default Radio

Blade code

<div class="space-y-4">
    <x-fwb.radio label="Default radio" name="default-radio" :checked="true" />
    <x-fwb.radio label="Another option" name="default-radio" />
</div>

Disabled State

Blade code

<div class="space-y-4">
    <x-fwb.radio label="Disabled radio" name="disabled-radio" :disabled="true" />
    <x-fwb.radio label="Disabled checked" name="disabled-radio-2" :disabled="true" :checked="true" />
</div>

Helper Text

For orders over $25 in eligible categories.

Get it within 2-3 business days for $9.99.

Blade code

<div class="space-y-4">
    <x-fwb.radio label="Free shipping" name="shipping" helper="For orders over $25 in eligible categories." :checked="true" />
    <x-fwb.radio label="Express delivery" name="shipping" helper="Get it within 2-3 business days for $9.99." />
</div>

Inline Layout

Blade code

<div class="flex flex-wrap gap-6">
    <x-fwb.radio label="Inline 1" name="inline-radio" :checked="true" />
    <x-fwb.radio label="Inline 2" name="inline-radio" />
    <x-fwb.radio label="Inline 3" name="inline-radio" />
    <x-fwb.radio label="Inline disabled" name="inline-radio" :disabled="true" />
</div>

Colors

Blade code

<div class="flex flex-wrap gap-6">
    <x-fwb.radio label="Blue" color="blue" name="color-radio" :checked="true" />
    <x-fwb.radio label="Red" color="red" name="color-radio-red" :checked="true" />
    <x-fwb.radio label="Green" color="green" name="color-radio-green" :checked="true" />
    <x-fwb.radio label="Purple" color="purple" name="color-radio-purple" :checked="true" />
    <x-fwb.radio label="Teal" color="teal" name="color-radio-teal" :checked="true" />
    <x-fwb.radio label="Yellow" color="yellow" name="color-radio-yellow" :checked="true" />
    <x-fwb.radio label="Orange" color="orange" name="color-radio-orange" :checked="true" />
</div>

Bordered

Blade code

<div class="space-y-4 max-w-md">
    <div class="flex items-center ps-4 border border-gray-200 rounded-lg dark:border-gray-700">
        <x-fwb.radio id="bordered-radio-1" name="bordered-radio" label="Default radio" :checked="true" />
    </div>
    <div class="flex items-center ps-4 border border-gray-200 rounded-lg dark:border-gray-700">
        <x-fwb.radio id="bordered-radio-2" name="bordered-radio" label="Another option" />
    </div>
</div>

Radio List Group

Identification

Blade code

<div class="max-w-md">
    <h3 class="mb-4 font-semibold text-gray-900 dark:text-white">Identification</h3>
    <ul class="w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
        <li class="w-full border-b border-gray-200 rounded-t-lg dark:border-gray-600">
            <div class="flex items-center ps-3">
                <x-fwb.radio id="list-radio-passport" name="list-radio" label="Passport" />
            </div>
        </li>
        <li class="w-full border-b border-gray-200 dark:border-gray-600">
            <div class="flex items-center ps-3">
                <x-fwb.radio id="list-radio-id" name="list-radio" label="ID Card" />
            </div>
        </li>
        <li class="w-full border-b border-gray-200 dark:border-gray-600">
            <div class="flex items-center ps-3">
                <x-fwb.radio id="list-radio-visa" name="list-radio" label="Visa" />
            </div>
        </li>
        <li class="w-full rounded-b-lg dark:border-gray-600">
            <div class="flex items-center ps-3">
                <x-fwb.radio id="list-radio-license" name="list-radio" label="Driver License" />
            </div>
        </li>
    </ul>
</div>

Component Properties

Radio x-fwb.radio

Prop Type Default Description
id string auto Unique identifier for the radio. Auto-generated if not provided.
label string|null null Label text displayed next to the radio button.
helper string|null null Helper text displayed below the label.
name string|null null Name attribute to group radio buttons together.
checked bool false Set the radio button to be selected by default.
disabled bool false Disable the radio button.
required bool false Mark the radio button as required.
color string blue Radio button color: blue, red, green, purple, teal, yellow, orange.