Overview
- Custom styled radio inputs
- Native radio behavior (single selection)
- Fully CSS customizable
- Accessible (focus-visible support)
- Lightweight and dependency-free
Basic usage
Wrap radio inputs inside a container with
data-anim-radio.
HTML structure
<div class="options" data-anim-radio>
<label class="options__item">
<input
class="options__input"
type="radio"
name="option"
value="1"
checked
>
<span class="options__text">
Option 1
</span>
</label>
<label class="options__item">
<input
class="options__input"
type="radio"
name="option"
value="2"
>
<span class="options__text">
Option 2
</span>
</label>
</div>
Important
Same name required
All radio inputs must have the same
name attribute
to work as a group (only one option can be selected).
States
- Default — not selected
- Checked — active state (inner circle visible)
- Focus — outline for accessibility
Customization
You can fully customize the radio appearance via CSS.
Change active color
.options__text::after {
background-color: #ff3c3c;
}
Download
Use Radio (Options) component for forms, filters, pricing plans, and selection interfaces.