Form Radio

<x-radio />

<x-radio label="Receive Alert" />
<x-radio label="Receive Alert" position="left" />

<x-radio label="Readonly" checked readonly />
<x-radio label="Disabled" checked disabled />

<x-radio>
    <x-slot:label>
        I agree to the <a href="#">terms and conditions</a>
    </x-slot:label>
</x-radio>

<x-radio>
    <x-slot:label left>
        I agree to the <a href="#">terms and conditions</a>
    </x-slot:label>
</x-radio>

<x-radio>
    <x-slot:label>
        Align on Middle
    </x-slot:label>
</x-radio>
 
<x-radio>
    <x-slot:label start>
        Align on Start
    </x-slot:label>
</x-radio>

<x-radio xs />
<x-radio sm />
<x-radio md />
<x-radio lg />

<x-radio label="Primary" />
<x-radio color="secondary" label="Secondary" />
<x-radio color="slate" label="Slate" />
<x-radio color="gray" label="Gray" />
<x-radio color="zinc" label="Zinc" />
<x-radio color="neutral" label="Neutral" />
<x-radio color="stone" label="Stone" />
<x-radio color="red" label="Red" />
<x-radio color="orange" label="Orange" />
<x-radio color="amber" label="Amber" />
<x-radio color="yellow" label="Yellow" />
<x-radio color="lime" label="Lime" />
<x-radio color="green" label="Green" />
<x-radio color="emerald" label="Emerald" />
<x-radio color="teal" label="Teal" />
<x-radio color="cyan" label="Cyan" />
<x-radio color="sky" label="Sky" />
<x-radio color="blue" label="Blue" />
<x-radio color="indigo" label="Indigo" />
<x-radio color="violet" label="Violet" />
<x-radio color="purple" label="Purple" />
<x-radio color="fuchsia" label="Fuchsia" />
<x-radio color="pink" label="Pink" />
<x-radio color="rose" label="Rose" />
<x-radio color="mauve" label="Mauve" />
<x-radio color="olive" label="Olive" />
<x-radio color="mist" label="Mist" />
<x-radio color="taupe" label="Taupe" />
<x-radio color="black" label="Black" />

<x-radio.group label="Plan" :options="[
    ['label' => 'Startup', 'value' => 'startup', 'description' => 'Up to 5 job postings', 'aside' => '$29 / mo'],
    ['label' => 'Business', 'value' => 'business', 'description' => 'Up to 25 job postings', 'aside' => '$99 / mo'],
    ['label' => 'Enterprise', 'value' => 'enterprise', 'description' => 'Unlimited', 'aside' => '$249 / mo'],
]" />

<x-radio.group list :options="$plans" />
<x-radio.group card :options="$plans" />
<x-radio.group panel :options="$plans" />
<x-radio.group inline :options="$periods" />

<x-radio.group card :columns="3" :options="$plans" />

<x-radio.group position="right" :options="$plans" />

<x-radio.group xs :options="$plans" />
<x-radio.group sm :options="$plans" />
<x-radio.group md :options="$plans" />
<x-radio.group lg :options="$plans" />

<x-radio.group color="green" :options="$plans" />

<x-radio.group select="label:name|value:id|description:note" :options="$plans" />

<x-radio.group card :columns="2" :options="$plans">
    @interact('option', $option)
        <div class="flex items-center justify-between">
            <span class="font-medium">{{ $option['label'] }}</span>
            <x-badge :text="$option['tag']" color="green" round sm />
        </div>
    @endinteract
</x-radio.group>