Forms

Radio

Pick one option from a group, with the dot growing when checked.

CSS only

Example

Monthly Yearly

<label class="u-radio"><input type="radio" name="plano" checked><span class="u-radio__dot"></span>Monthly</label>
<label class="u-radio"><input type="radio" name="plano"><span class="u-radio__dot"></span>Yearly</label>

Installation

Radio ships in the full package, in unslop.css:

curl -fsSL unslop.leallabs.dev/i | sh

No build It's just CSS: with unslop.css on the page, the classes already work.

Classes and variants

Class	What it does
`u-radio`	The label that wraps the input and the dot.
`u-radio__dot`	The drawn circle.

Accessibility and keyboard

State and roles

Where	Attribute	What it says
name	native attribute	The same name groups the options.
checked	native attribute	Checked option.

Keyboard

Key	Does
Tab	enters the group
Arrows	change the checked option (native)