Kaiko UI Kaiko UI

Radio

Stable

Radio button component for single-choice selections with labels, validation states, and multiple styling options.

API Reference

Attribute Description Type Default
name Radio group identifier — required for grouping buttons together string ""
value Radio button value submitted with the form string ""
color Radio button color theme string "primary"
size Radio button size variant string "md"
checked Sets radio as selected by default; use :checked=False to clear boolean False
disabled Disables radio button interaction boolean False
required Marks radio group as a required field boolean False
error Single error message text string ""
errors List of error message strings list []
hint Helper text shown below the radio button string ""
hx HTMX event integration for server-side reactivity string ""

color

primary secondary accent neutral success warning info error

size

xs sm md lg xl

Accessibility

Grouping: all radio buttons in a group must share the same name. Wrap the group in a <fieldset> with a <legend> to give the group an accessible label.

Keyboard: once a radio group receives focus, use arrow keys to navigate between options. Space selects the focused option.

Errors: associate error text with the group via aria-describedby on the fieldset or wrapping element so screen readers announce the error on focus.

Examples

Usage 


<c-radio name="size" value="small">Small</c-radio>
<c-radio name="size" value="medium" :checked=True>Medium</c-radio>
<c-radio name="size" value="large">Large</c-radio>

Basic Radio Group 

<c-radio name="size" value="small">Small</c-radio>
<c-radio name="size" value="medium" :checked=True>Medium</c-radio>
<c-radio name="size" value="large">Large</c-radio>

Without Labels 

<!-- Standalone radio buttons -->
<c-radio name="standalone" value="option1" />
<c-radio name="standalone" value="option2" :checked=False />
<c-radio name="standalone" value="option3" checked />
<c-radio name="standalone" value="option4" :checked=True />

Colors 

<c-radio name="color-demo" value="primary" color="primary" :checked=True>Primary</c-radio>
<c-radio name="color-demo" value="success" color="success">Success</c-radio>
<c-radio name="color-demo" value="error" color="error">Error</c-radio>

Sizes 

<c-radio name="size-demo" value="sm" size="sm" :checked=True>Small</c-radio>
<c-radio name="size-demo" value="lg" size="lg">Large</c-radio>
<c-radio name="size-demo" value="xl" size="xl">Extra Large</c-radio>

Hint and Error

We only send product updates.
You must accept the terms.
Select a preference
Must confirm selection
<c-radio name="messages" value="email" hint="We only send product updates.">Email updates</c-radio>
<c-radio name="messages" value="terms" error="You must accept the terms.">Accept terms</c-radio>
<c-radio name="messages" value="pref" :errors="['Select a preference']">Confirm preferences</c-radio>

Alpine.js Integration

Theme Preference

Language

Selected Values:
Theme:
Language: 
<div x-data="{ selectedTheme: 'light', selectedLanguage: 'en' }">
  <!-- Theme Selection -->
  <c-radio name="theme" value="light" x-model="selectedTheme" color="primary">
    Light Theme
  </c-radio>
  <c-radio name="theme" value="dark" x-model="selectedTheme" color="neutral">
    Dark Theme
  </c-radio>

  <!-- Language Selection -->
  <c-radio name="language" value="en" x-model="selectedLanguage" color="success">
    English
  </c-radio>
  <c-radio name="language" value="es" x-model="selectedLanguage" color="success">
    Español
  </c-radio>
</div>