new
Livewire Volt extension for VSCode. Voltage →
maryUI

Radio

Default attributes

By default, it will look up for:

  • $object->id for option value.
  • $object->name for option display label.

Select one 
@php
    $users = App\Models\User::take(3)->get();
@endphp
 
<x-radio label="Select one" :options="$users" wire:model="selectedUser" />

Alternative attributes

Just set option-value and option-label representing the desired targets.

Select one
Choose wisely
@php
    $users = App\Models\User::take(3)->get();
@endphp
 
<x-radio
    label="Select one"
    :options="$users"
    option-value="custom_key"
    option-label="other_name"
    wire:model="selectedUser2"
    hint="Choose wisely"
    class="bg-red-50" />

Disable options

You can disable options by setting the disabled attribute.

Select one 
@php
    $users = [
        ['id' => 1, 'name' => 'John'],
        ['id' => 2, 'name' => 'Doe'],
        ['id' => 3, 'name' => 'Mary', 'disabled' => true],
        ['id' => 4, 'name' => 'Kate'],
    ];
@endphp
 
<x-radio
    label="Select one" :options="$users" wire:model="selectedUser3" />
maryUI
Sponsor