Livewire Components

Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time. 

<x-radio-group
    name="spacing"
    defaultValue="comfortable"
>
    <div class="flex items-center space-x-3 space-y-0">
        <x-radio-group.item
            value="default"
            id="r1"
        />
        <x-label htmlFor="r1">
            Default
        </x-label>
    </div>
    <div class="flex items-center space-x-3 space-y-0">
        <x-radio-group.item
            value="comfortable"
            id="r2"
        />
        <x-label htmlFor="r2">
            Comfortable
        </x-label>
    </div>
    <div class="flex items-center space-x-3 space-y-0">
        <x-radio-group.item
            value="compact"
            id="r3"
        />
        <x-label htmlFor="r3">
            Compact
        </x-label>
    </div>
</x-radio-group>

Installation

php artisan vendor:publish --tag=radio-group --force

Usage

<x-radio-group name="spacing" defaultValue="comfortable">
    <div class="flex items-center space-x-2">
        <x-radio-group.item value="option-one" id="option-one" />
        <x-label htmlFor="option-one"> Option One </x-label>
    </div>
    <div class="flex items-center space-x-2">
        <x-radio-group.item value="option-two" id="option-two" />
        <x-label htmlFor="option-two"> Option Two </x-label>
    </div>
</x-radio-group>

Examples

Form

We will notify around the world in no time 

<x-form class="w-2/3 space-y-6">
    <x-form.item
        class="space-y-3"
        name="notification"
    >
        <x-form.label>Notify me about...</x-form.label>
        <x-radio-group
            x-form:control
            name="notification"
            class="space-y-1"
        >
            <x-form.item class="flex items-center space-x-3 space-y-0">
                <x-radio-group.item
                    x-form:control
                    value="all"
                />
                <x-form.label class="font-normal">
                    All new messages
                </x-form.label>
            </x-form.item>
            <x-form.item class="flex items-center space-x-3 space-y-0">
                <x-radio-group.item
                    x-form:control
                    value="mentions"
                />
                <x-form.label class="font-normal">
                    Direct messages and mentions
                </x-form.label>
            </x-form.item>
            <x-form.item class="flex items-center space-x-3 space-y-0">
                <x-radio-group.item
                    x-form:control
                    value="none"
                />
                <x-form.label class="font-normal">Nothing</x-form.label>
            </x-form.item>
 
        </x-radio-group>
        <x-form.description> We will notify around the world in no time</x-form.description>
    </x-form.item>
 
    <x-button type="submit">Submit</x-button>
</x-form>