Roma / Components

Selection controls

Checkboxes for picking several, radios for picking one, toggles for switching something on right away.

<label class="tl-choice"><input class="tl-checkbox" type="checkbox"> Newsletter</label>
<label class="tl-choice"><input class="tl-radio" type="radio" name="freq"> Monthly</label>
<label class="tl-choice"><input class="tl-toggle" type="checkbox" role="switch"> Dark map</label>

States

Guidelines

Use a toggle only when the change takes effect immediately. Use a checkbox when it applies after pressing Save.

Don't

Use radios for a single yes/no choice; that's a checkbox.

Figma: Checkbox (12 variants), Radio (8) and Toggle (8) component sets.

	Default	Hover	Focus	Disabled
Checkbox off
Checkbox on
Checkbox mixed
Radio off
Radio on
Toggle off
Toggle on