Inputs

Radio

The radio component offers an easy way to set up a radio input field in your forms. By simple setting its name attribute it also automatically sets your id attribute and makes sure old values are respected.

The most basic usage of the component exists in setting a name attribute:

<x-radio name="tier" id="tier_1" value="tier_1" />
<x-radio name="tier" id="tier_2" value="tier_2" />

You can easily add a label to a radio by using the label attribute, or by using the default slot:

Via prop:

<x-radio name="tier" id="tier_1" value="tier_1" label="Tier 1" />
<x-radio name="tier" id="tier_2" value="tier_2" label="Tier 2" />

Via slot:

<x-radio name="tier" id="tier_1" value="tier_1">
    Tier 1
</x-radio>
<x-radio name="tier" id="tier_2" value="tier_2">
    Tier 2
</x-radio>

You can also add a description (help text) for a radio by either setting the description attribute or by using the description slot.

Via prop:

<x-radio name="tier" id="tier_1" value="tier_1" label="Tier 1" description="Our most basic tier" />
<x-checkbox name="tier" id="tier_1" value="tier_1" label="Tier 1">
    <x-slot name="description">Our most basic tier</x-slot>
</x-checkbox>

The radio component also supports checked values that were set. For example, you might want to apply some validation in the backend and make sure the user doesn't lose their input data when you show them the form again with the validation errors. When re-rendering the form, the radio component will remember the checked value (when not using wire:model):

<input name="tier" id="tier_1" value="tier_1" type="radio" checked />
Previous
Checkbox
Caught a mistake? Suggest an edit on GitHub