The Radio component renders a radio button input with automatic state management, ideal for mutually exclusive options.
Basic Usage
<x-forms::radio
name="status"
label="Active"
value="active"
/>
<x-forms::radio
name="status"
label="Inactive"
value="inactive"
/>
Attributes
The name attribute for the radio input. Should be the same for all options in a group
Label text for the radio button. Auto-generated from name if not provided
The value submitted when this radio button is selected
Model instance for checked state binding. Can be Eloquent model, array, or object
default
bool|mixed
default:"false"
Default checked state when no model is bound and no old input exists
Mark radio button as required
Show/hide the label element
Display validation errors
Display JavaScript validation errors
Render in inline layout. When true, label shows as space only
CSS classes for inline label
CSS classes for inline input wrapper
Examples
Basic Radio Group
<fieldset>
<legend>Account Status</legend>
<x-forms::radio
name="status"
label="Active"
value="active"
/>
<x-forms::radio
name="status"
label="Inactive"
value="inactive"
/>
<x-forms::radio
name="status"
label="Pending"
value="pending"
/>
</fieldset>
Required Radio Group
<fieldset>
<legend>Select Payment Method</legend>
<x-forms::radio
name="payment_method"
label="Credit Card"
value="card"
required
/>
<x-forms::radio
name="payment_method"
label="PayPal"
value="paypal"
required
/>
</fieldset>
required attribute for proper validation.
With Default Selection
<x-forms::radio
name="newsletter"
label="Yes"
value="yes"
:default="true"
/>
<x-forms::radio
name="newsletter"
label="No"
value="no"
/>
Model Binding
<x-forms::form :model="$user">
<fieldset>
<legend>Role</legend>
<x-forms::radio
name="role"
label="Admin"
value="admin"
/>
<x-forms::radio
name="role"
label="Editor"
value="editor"
/>
<x-forms::radio
name="role"
label="Viewer"
value="viewer"
/>
</fieldset>
</x-forms::form>
value matches $user->role.
Numeric Values
<fieldset>
<legend>Rating</legend>
<x-forms::radio name="rating" label="1 Star" :value="1" />
<x-forms::radio name="rating" label="2 Stars" :value="2" />
<x-forms::radio name="rating" label="3 Stars" :value="3" />
<x-forms::radio name="rating" label="4 Stars" :value="4" />
<x-forms::radio name="rating" label="5 Stars" :value="5" />
</fieldset>
<div class="d-flex gap-3">
<x-forms::radio
name="gender"
label="Male"
value="male"
inline
/>
<x-forms::radio
name="gender"
label="Female"
value="female"
inline
/>
<x-forms::radio
name="gender"
label="Other"
value="other"
inline
/>
</div>
With Custom IDs
<x-forms::radio
name="subscription"
label="Monthly"
value="monthly"
id="sub_monthly"
/>
<x-forms::radio
name="subscription"
label="Yearly"
value="yearly"
id="sub_yearly"
/>
Checked State Logic
The component determines the checked state in this order:
- Old Input (highest priority)
- If
old($name) exists, checks if $value matches the old input value or is in the array
- Model Binding
- For arrays: Checks if
$value exists in the model’s array
- For single values: Checks if
$value matches the model value
- Default Value (lowest priority)
- Uses the
default attribute
Example Checked State Scenarios
{{-- Checked if old('status') equals 'active' --}}
<x-forms::radio name="status" value="active" />
{{-- Checked if $article->status equals 'published' --}}
<x-forms::form :model="$article">
<x-forms::radio name="status" value="published" />
</x-forms::form>
{{-- Checked by default (no old input or model) --}}
<x-forms::radio name="theme" value="dark" :default="true" />
{{-- Checked if $user->preferences array contains 'notifications' --}}
<x-forms::form :model="$user">
<x-forms::radio name="preferences[]" value="notifications" />
</x-forms::form>
HTML Structure
The component renders with Bootstrap 5 structure:
<div class="form-group">
<div class="form-check">
<input
type="radio"
class="form-check-input"
id="status"
name="status"
value="active"
>
<label class="form-check-label" for="status">
Active
<span class="required">*</span> {{-- if required --}}
</label>
</div>
<small class="form-text">Help text here</small> {{-- if help slot provided --}}
<div class="invalid-feedback">Error message</div> {{-- if validation error --}}
</div>
CSS Classes
The radio input includes:
form-check-input - Bootstrap 5 radio classis-invalid - Added when validation errors exist
Validation
Radio buttons support standard Laravel validation:
// Controller
$request->validate([
'status' => 'required|in:active,inactive,pending',
'payment_method' => 'required|string',
]);
show-errors is true.
For radio groups, validation errors typically display once per group. Consider showing the error message on the first radio button or in a separate location.
Radio vs Select
Use radio buttons when:
- You have 2-5 options
- All options should be visible
- Users need to compare options easily
Use a select dropdown when:
- You have many options (6+)
- Space is limited
- Options don’t need simultaneous visibility
Arrayable Values
The component handles Arrayable instances (Collections, etc.):
{{-- $user->settings is a Collection --}}
<x-forms::form :model="$user">
<x-forms::radio
name="settings[]"
value="email_notifications"
/>
</x-forms::form>
Accessibility
- Always use a
<fieldset> and <legend> to group related radio buttons
- Each radio has a properly associated label via the
for attribute
- The
required attribute is added to the input when specified
- Validation errors are associated with the input for screen readers