Radio

A lightweight semantic radio component built using native HTML radio inputs and CSS variables.

Ignix Lite radio inputs support semantic intents, grouped selections, sizing controls, and accessible keyboard interactions without requiring JavaScript.

---

Usage

Preview

JavaScript

Code

<label>
  <input type="radio" name="lang" />
  JavaScript
</label>

---

Checked State

Preview

JavaScript

Code

<label>
  <input
    type="radio"
    name="lang"
    checked
  />
  JavaScript
</label>

---

Disabled State

Preview

Disabled

Code

<label>
  <input
    type="radio"
    disabled
  />
  Disabled
</label>

---

Required Group

Preview

JavaScript

Python

Java

Code

<label>
  <input
    type="radio"
    name="required-group"
    required
  />
  JavaScript
</label>

<label>
  <input
    type="radio"
    name="required-group"
  />
  Python
</label>

<label>
  <input
    type="radio"
    name="required-group"
  />
  Java
</label>

---

Radio Group

Preview

JavaScript

Python

Java

Code

<label>
  <input
    type="radio"
    name="group"
    value="js"
  />
  JavaScript
</label>

<label>
  <input
    type="radio"
    name="group"
    value="py"
  />
  Python
</label>

<label>
  <input
    type="radio"
    name="group"
    value="java"
  />
  Java
</label>

---

Intent Variants

Preview

Primary

Success

Danger

Warning

Neutral

Code

<label data-intent="primary">
  <input
    type="radio"
    name="intent"
    checked
  />
  Primary
</label>

<label data-intent="success">
  <input
    type="radio"
    name="intent"
  />
  Success
</label>

<label data-intent="danger">
  <input
    type="radio"
    name="intent"
  />
  Danger
</label>

<label data-intent="warning">
  <input
    type="radio"
    name="intent"
  />
  Warning
</label>

<label data-intent="neutral">
  <input
    type="radio"
    name="intent"
  />
  Neutral
</label>

---

Sizes

Preview

Small

Medium

Large

Code

<label data-size="sm">
  <input type="radio" name="size" />
  Small
</label>

<label data-size="md">
  <input
    type="radio"
    name="size"
    checked
  />
  Medium
</label>

<label data-size="lg">
  <input type="radio" name="size" />
  Large
</label>

---

Real World Example

Preview

Starter Plan

Pro Plan

Enterprise Plan

Code

<form>

  <label>
    <input
      type="radio"
      name="plan"
      checked
    />
    Starter Plan
  </label>

  <label data-intent="success">
    <input
      type="radio"
      name="plan"
    />
    Pro Plan
  </label>

  <label data-intent="warning">
    <input
      type="radio"
      name="plan"
    />
    Enterprise Plan
  </label>

  <button data-intent="primary">
    Continue
  </button>

</form>

Attributes

Attribute	Type	Description
data-intent	'primary' | 'success' | 'danger' | 'warning' | 'neutral'	Applies semantic radio colors
data-size	'sm' | 'md' | 'lg'	Controls radio size
checked	boolean	Sets checked state
disabled	boolean	Disables interaction
required	boolean	Makes radio selection required
name	string	Groups radio inputs together
value	string	Native radio value
type="radio"	string	Native radio input type