Toggle Radios

Pure CSS toggle switchs for form input radio buttons

Preview

Coming soon.

Installation

CSS

<link rel="stylesheet" href="toggle-radios.css">

HTML

<div class="toggle-radio">
	<input type="radio" name="mode" id="mode1" value="mode1">
	<label for="mode1">Mode 1</label>

	<input type="radio" name="mode" id="mode2" value="mode2">
	<label for="mode2">Mode 2</label>

	<input type="radio" name="mode" id="mode3" value="mode3">
	<label for="mode3">Mode 3</label>
</div>

Options

Option	Data Attribute
Rounded	data-style="rounded"
Square	data-style="square"
Disabled	add the disabled attribute to the input tag
Checked	add the checked attribute to the input tag
Colors	data-color="red" data-color="orange" data-color="yellow" data-color="green" data-color="blue" data-color="purple" data-color="gray"

Features

• CSS only - no JavaScript!
• No dependencies
• Fully reponsive
• Fully customizable
• Fully self contained
• 7 color schemes
• Keyboard Accessible - accessibility (a11y)
• Focus Styles - accessibility (a11y)
• Supports all modern browsers
• Search engine friendly
• Screen reader friendly
• Doesn't dump a bunch of global styles that'll screw with your other CSS

See also Toggle Switchy - A pure CSS toggle switch for form input checkboxes