Get started
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Radio

A styled native <input type="radio">. Pass label / description to compose field helpers, or use the bare control in custom layouts.

Usage
Plan

Priority support and more seats.

example.blade.php 
<fieldset class="grid max-w-sm gap-3">
    <legend class="text-sm font-medium">Plan</legend>
    <x-slate::radio name="plan" value="free" label="Free" checked />
    <x-slate::radio name="plan" value="pro" label="Pro" description="Priority support and more seats." />
</fieldset>

Control only
example.blade.php 
<div class="flex items-center gap-3">
    <x-slate::radio id="terms" name="terms" value="accepted" />
    <x-slate::field-label for="terms">I accept the terms</x-slate::field-label>
</div>

Invalid state

Choose an option to continue.

example.blade.php 
<x-slate::radio
    name="demo"
    value="1"
    label="Continue"
    error-message="Choose an option to continue."
    :show-error="true"
/>

Props
Prop Type Default Description
label string — Composes field + field-label
description string — Composes field-description
errorMessage string — Manual error copy
showError bool true only when errorMessage is set Radio groups rarely want a message on every option
name string — Input name
value string "1" Option value
checked bool false Initial checked state
errorKey string — Override validation key

All standard HTML attributes pass through to the control.

Last updated . · Legal