// Generated by scripts/generate-showcase.mjs. Do not edit directly. page RadioDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_id = ctx.url.searchParams.get("pg_id") ?? "radio-1" state playground_name = ctx.url.searchParams.get("pg_name") ?? "radioField" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Standard plan" state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false" state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter radio" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal" state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start" state playground_value = ctx.url.searchParams.get("pg_value") ?? "standard" state playground_options = ctx.url.searchParams.get("pg_options") ?? "[]" state playground_checked = ctx.url.searchParams.get("pg_checked") ?? "true" state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "vertical" state playground_card = ctx.url.searchParams.get("pg_card") ?? "false" state playground_rightAligned = ctx.url.searchParams.get("pg_rightAligned") ?? "false" state playground_list = ctx.url.searchParams.get("pg_list") ?? "false" state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "" state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? "" state playground_error = ctx.url.searchParams.get("pg_error") ?? "" state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false" state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false" state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" state playground_class = ctx.url.searchParams.get("pg_class") ?? "" seo { title = "Radio" description = "Theme-aware, responsive radio component." } view {
Forms component

Radio

Theme-aware, responsive radio component.

25 props0 slots5 eventsTheme readyResponsive
Interactive playground

Configure Radio

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<Radio
  id="radio-1"
  name="radioField"
  label="Standard plan"
  placeholder="Enter radio"
  value="standard"
  options='[]'
  checked="true"
/>
Component props25 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Basic usage

Default radio

Use a single radio control for one selectable option.

01
Live preview
Component usage.wrn
<Radio
  id="radio-1"
  name="radioField"
  label="Standard plan"
  placeholder="Enter radio"
  value="standard"
  options='[]'
  checked="true"
/>
States

Disabled

Disable an option when it is unavailable.

02
Live preview
Component usage.wrn
<Radio
  id="radio-2"
  name="radioField"
  label="Choose a plan"
  placeholder="Enter radio"
  variant="outlined"
  icon="icon-[lucide--sparkles]"
  options='[]'
  disabled="true"
/>
Groups

Inline radio group

Arrange compact radio options on one horizontal line.

03
Live preview
Component usage.wrn
<Radio
  id="radio-3"
  name="radioField"
  label="Choose a plan"
  placeholder="Enter radio"
  variant="floating"
  icon="icon-[lucide--circle-user-round]"
  iconPosition="end"
  options='[
    {
      "label": "Starter",
      "value": "starter",
      "description": ""
    },
    {
      "label": "Professional",
      "value": "professional",
      "description": ""
    },
    {
      "label": "Enterprise",
      "value": "enterprise",
      "description": ""
    }
  ]'
  orientation="horizontal"
/>
Groups

Vertical radio group

Stack radio options for easy scanning.

04
Live preview
Component usage.wrn
<Radio
  size="sm"
  id="radio-4"
  name="radioField"
  label="Choose a plan"
  placeholder="Enter radio"
  variant="pill"
  options='[
    {
      "label": "Starter",
      "value": "starter",
      "description": ""
    },
    {
      "label": "Professional",
      "value": "professional",
      "description": ""
    },
    {
      "label": "Enterprise",
      "value": "enterprise",
      "description": ""
    }
  ]'
/>
Content

Radios with descriptions

Add supporting copy to clarify each choice.

05
Live preview
Component usage.wrn
<Radio
  id="radio-5"
  name="radioField"
  label="Choose a plan"
  placeholder="Enter radio"
  options='[
    {
      "label": "Starter",
      "value": "starter",
      "description": "For individuals and small projects."
    },
    {
      "label": "Professional",
      "value": "professional",
      "description": "For growing teams and products."
    },
    {
      "label": "Enterprise",
      "value": "enterprise",
      "description": "For organizations needing advanced controls."
    }
  ]'
  readonly="true"
/>
Cards

Radio cards

Present options as selectable horizontal cards.

06
Live preview
Component usage.wrn
<Radio
  id="radio-6"
  name="radioField"
  label="Choose a plan"
  placeholder="Enter radio"
  options='[
    {
      "label": "Starter",
      "value": "starter",
      "description": "For individuals and small projects."
    },
    {
      "label": "Professional",
      "value": "professional",
      "description": "For growing teams and products."
    },
    {
      "label": "Enterprise",
      "value": "enterprise",
      "description": "For organizations needing advanced controls."
    }
  ]'
  orientation="horizontal"
  card="true"
/>
Cards

Vertical radio cards

Stack selectable cards in a vertical layout.

07
Live preview
Component usage.wrn
<Radio
  id="radio-7"
  name="radioField"
  label="Choose a plan"
  placeholder="Enter radio"
  options='[
    {
      "label": "Starter",
      "value": "starter",
      "description": "For individuals and small projects."
    },
    {
      "label": "Professional",
      "value": "professional",
      "description": "For growing teams and products."
    },
    {
      "label": "Enterprise",
      "value": "enterprise",
      "description": "For organizations needing advanced controls."
    }
  ]'
  card="true"
  inline="true"
/>
Alignment

Right-aligned radio

Place controls at the far edge of their labels.

08
Live preview
Component usage.wrn
<Radio
  id="radio-8"
  name="radioField"
  label="Choose a plan"
  placeholder="Enter radio"
  options='[
    {
      "label": "Starter",
      "value": "starter",
      "description": "For individuals and small projects."
    },
    {
      "label": "Professional",
      "value": "professional",
      "description": "For growing teams and products."
    },
    {
      "label": "Enterprise",
      "value": "enterprise",
      "description": "For organizations needing advanced controls."
    }
  ]'
  rightAligned="true"
  cornerHint="Optional"
/>
Lists

Radio list group

Separate options with list dividers.

09
Live preview
Component usage.wrn
<Radio
  id="radio-9"
  name="radioField"
  label="Choose a plan"
  placeholder="Enter radio"
  options='[
    {
      "label": "Starter",
      "value": "starter",
      "description": "For individuals and small projects."
    },
    {
      "label": "Professional",
      "value": "professional",
      "description": "For growing teams and products."
    },
    {
      "label": "Enterprise",
      "value": "enterprise",
      "description": "For organizations needing advanced controls."
    }
  ]'
  list="true"
/>
Lists

Horizontal radio list group

Combine list styling with a horizontal layout.

010
Live preview
Component usage.wrn
<Radio
  id="radio-10"
  name="radioField"
  label="Choose a plan"
  placeholder="Enter radio"
  options='[
    {
      "label": "Starter",
      "value": "starter",
      "description": "For individuals and small projects."
    },
    {
      "label": "Professional",
      "value": "professional",
      "description": "For growing teams and products."
    },
    {
      "label": "Enterprise",
      "value": "enterprise",
      "description": "For organizations needing advanced controls."
    }
  ]'
  orientation="horizontal"
  list="true"
/>
Validation

Validation states

Validate the selected group with @wrnexus/validation.

011
Live preview
Component usage.wrn
<Radio
  id="radio-11"
  name="validatedField"
  label="Choose a plan"
  placeholder="Enter radio"
  options='[
    {
      "label": "Starter",
      "value": "starter",
      "description": "For individuals and small projects."
    },
    {
      "label": "Professional",
      "value": "professional",
      "description": "For growing teams and products."
    },
    {
      "label": "Enterprise",
      "value": "enterprise",
      "description": "For organizations needing advanced controls."
    }
  ]'
  helperText="Select one plan to continue."
  required="true"
/>
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@inputFires immediately as the component value changes.
@changeFires when the component value or selection changes.
@focusFires when the component receives focus.
@blurFires when focus leaves the component.
@invalidFires when the component emits the invalid event.
Event listener.js
const component = document.querySelector('[data-wrn-events]')

component.addEventListener('input', (event) => {
  console.log(event.detail)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
idstring""No
namestring""No
labelstring"Radio"No
hiddenLabelbooleanfalseNo
placeholderstring""No
variantstring"normal"No
iconstring""No
iconPositionstring"start"No
valuestring"on"No
optionsstring[]No
checkedbooleanfalseNo
orientationstring"vertical"No
cardbooleanfalseNo
rightAlignedbooleanfalseNo
listbooleanfalseNo
helperTextstring""No
cornerHintstring""No
errorstring""No
inlinebooleanfalseNo
readonlybooleanfalseNo
disabledbooleanfalseNo
requiredbooleanfalseNo
classstring""No
} }