Skip to content

Latest commit

 

History

History
51 lines (40 loc) · 1.39 KB

README.md

File metadata and controls

51 lines (40 loc) · 1.39 KB
Raw

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