Radio

Single-choice selection control with multiple aesthetic design styles: Skeuomorphism (3D tactile depth), Flat Minimal 2D, Neumorphism (Soft UI), Interactive Plan Cards, and Segmented Pills.

<x-radio>

Skeuomorphic 3D Tactile Radio

Realistic physical feel with beveled metallic outer rim, convex gradient depth, and radiant jewel glow indicator.

Starter Engine · Free Tier Pro Developer · $29 / month Enterprise Cluster · Custom Scale

<x-radio variant="skeuomorphic" name="plan" value="starter" label="Starter Engine" :checked="true" />
<x-radio variant="skeuomorphic" name="plan" value="pro" label="Pro Developer ($29/mo)" />
<x-radio variant="skeuomorphic" name="plan" value="enterprise" label="Enterprise Cluster" />

Flat 2D Minimalist Radio

Modern high-contrast 2D geometric style with clean bold outlines, zero shadow blur, and sharp solid dot.

Production (ap-southeast-1) Staging Preview (us-east-1) Local Environment (127.0.0.1)

<x-radio variant="flat" name="env" value="production" label="Production" :checked="true" />
<x-radio variant="flat" name="env" value="staging" label="Staging Preview" />
<x-radio variant="flat" name="env" value="local" label="Local Environment" />

Neumorphic Soft UI Radio

Extruded dual light/dark shadows with tactile sunken depression when checked and ambient purple center glow.

Dark Obsidian Midnight Blue Cyber Violet

<x-radio variant="neumorphic" name="theme" value="dark" label="Dark Obsidian" :checked="true" />
<x-radio variant="neumorphic" name="theme" value="midnight" label="Midnight Blue" />
<x-radio variant="neumorphic" name="theme" value="cyber" label="Cyber Violet" />

Interactive Plan Selection Cards

Full clickable radio cards with icon, title, description, price badge, and active border highlight.

Hobby Free

Up to 3 projects, SQLite database, community support.

Pro Developer $19/mo

Unlimited projects, MySQL ORM, priority support.

<x-radio-card name="plan" value="hobby" title="Hobby" price="Free" :checked="true">
    Up to 3 projects, SQLite database, community support.
</x-radio-card>

<x-radio-card name="plan" value="pro" title="Pro Developer" price="$19/mo">
    Unlimited projects, MySQL ORM, priority support.
</x-radio-card>

Segmented Radio Group (Pill Switcher)

Grouped radio buttons with sliding pill indicator — ideal for billing intervals or filter states.

Monthly Billing Annual Billing -20% Lifetime Deal

<x-radio-group variant="segmented" name="billing_cycle">
    <x-radio-segmented value="monthly" label="Monthly Billing" :checked="true" />
    <x-radio-segmented value="annual" label="Annual Billing" badge="-20%" />
    <x-radio-segmented value="lifetime" label="Lifetime Deal" />
</x-radio-group>

← Previous Checkbox Next → InputGroup