Phara UI v2.x
Login

Radio

A radio button allows users to select a single option from a set of mutually exclusive choices.

Basic

Simple radio group with labels.

Blade 
<div class="flex flex-col gap-2">
    <x-ui::radio name="plan" value="basic" label="Basic Plan" />
    <x-ui::radio name="plan" value="pro" label="Pro Plan" />
</div>
Variants

Different color options for different semantic meanings.

Blade 
<x-ui::radio name="variant" variant="default" label="Default" checked />
<x-ui::radio name="variant" variant="success" label="Success" checked />
<x-ui::radio name="variant" variant="warning" label="Warning" checked />
<x-ui::radio name="variant" variant="danger" label="Danger" checked />
With Description

Add a description to provide more information about the option.

Blade 
<div class="flex flex-col gap-6">
    <x-ui::radio 
        name="notification" 
        label="Everything" 
        description="Receive all notifications for this project." 
        checked 
    />
    <x-ui::radio 
        name="notification" 
        label="Mentions only" 
        description="Receive notifications only when you are mentioned." 
    />
</div>
Disabled

Prevent user interaction with the radio button.

Blade 
<x-ui::radio label="Disabled unchecked" disabled />
<x-ui::radio label="Disabled checked" checked disabled />