https://github.com/adamculpepper/toggle-radios
Pure CSS toggle switchs for form input radio buttons
https://github.com/adamculpepper/toggle-radios
css css-only pure-css radio radio-button-group radio-buttons radio-buttons-group radio-group radios toggle-controls toggle-radios toggle-switch toggle-switches
Last synced: 7 months ago
JSON representation
Pure CSS toggle switchs for form input radio buttons
- Host: GitHub
- URL: https://github.com/adamculpepper/toggle-radios
- Owner: adamculpepper
- License: mit
- Created: 2018-10-23T19:55:33.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-05-22T01:12:38.000Z (over 5 years ago)
- Last Synced: 2025-07-20T07:49:42.443Z (7 months ago)
- Topics: css, css-only, pure-css, radio, radio-button-group, radio-buttons, radio-buttons-group, radio-group, radios, toggle-controls, toggle-radios, toggle-switch, toggle-switches
- Language: CSS
- Homepage: https://adamculpepper.github.io/toggle-radios
- Size: 17.6 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Toggle Radios
Pure CSS toggle switchs for form input radio buttons
## Preview
Coming soon.
## Installation
### CSS
``````
### HTML
```
Mode 1
Mode 2
Mode 3
```
## 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](https://toggleswitchy.com) - A pure CSS toggle switch for form input checkboxes