luqin / React Icheck
🔘 iCheck components built with React. Highly customizable checkbox, radio buttons and radio group.
Stars: ✭ 175
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Icheck
Flutter smart select
SmartSelect allows you to easily convert your usual form select or dropdown into dynamic page, popup dialog, or sliding bottom sheet with various choices input such as radio, checkbox, switch, chips, or even custom input. Supports single and multiple choice.
Stars: ✭ 179 (+2.29%)
Mutual labels: switch, radio, checkbox
Easy Toggle State
A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time.
Stars: ✭ 261 (+49.14%)
Mutual labels: switch, radio, checkbox
Bootstrap Switch
Turn checkboxes and radio buttons in toggle switches.
Stars: ✭ 5,132 (+2832.57%)
Mutual labels: switch, radio, checkbox
GDCheckbox
Customizable CheckBox / RadioButton component for iOS
Stars: ✭ 23 (-86.86%)
Mutual labels: checkbox, switch
Switch
🐰 A simple and powerful switch for checkbox.
Stars: ✭ 492 (+181.14%)
Mutual labels: switch, checkbox
Compoundbuttongroup
An Android library to easily implement compound buttons
Stars: ✭ 52 (-70.29%)
Mutual labels: radio, checkbox
Ckdcss
A tiny set of micro interactions for your checkboxes.
Stars: ✭ 49 (-72%)
Mutual labels: radio, checkbox
Prompt Checkbox
This repository has been archived, use Enquirer instead.
Stars: ✭ 21 (-88%)
Mutual labels: radio, checkbox
Aiflatswitch
Nicely animated flat design switch alternative to UISwitch
Stars: ✭ 904 (+416.57%)
Mutual labels: switch, checkbox
Vue Checkbox Radio
Checkbox and radio component for Vue.js
Stars: ✭ 99 (-43.43%)
Mutual labels: radio, checkbox
Bootstrap Table
An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
Stars: ✭ 11,068 (+6224.57%)
Mutual labels: radio, checkbox
Panelswitchhelper
✔️ A framework that helps the keyboard smoothly transition to the function panel 一个帮助键盘平稳过渡到功能面板的框架,支持动画无缝衔接,支持 activity/fragment/dialog/dialogFragment/popupWindow 容器,支持IM/直播/视频播放/信息流评论等场景,支持全屏模式。
Stars: ✭ 1,957 (+1018.29%)
Mutual labels: switch
Controllerx
Create controller-based automations with ease to control your home devices and scenes.
Stars: ✭ 141 (-19.43%)
Mutual labels: switch
Expo Dark Mode Switch
A beautiful React dark mode switch component for iOS, Android, and Web
Stars: ✭ 137 (-21.71%)
Mutual labels: switch
Look4sat
Amateur radio and weather satellite tracker and passes predictor for Android inspired by Gpredict
Stars: ✭ 160 (-8.57%)
Mutual labels: radio
React Svg Map
A set of React.js components to display an interactive SVG map
Stars: ✭ 150 (-14.29%)
Mutual labels: checkbox
React-iCheck
iCheck components built with React. No jQuery and Zepto
Online demo: http://luqin.github.io/react-icheck
Note: React-iCheck still in development
Features
- Identical inputs across different browsers and devices — both desktop and mobile
- Touch devices support — iOS, Android, BlackBerry, Windows Phone, Amazon Kindle
-
Keyboard accessible inputs —
Tab
,Spacebar
,Arrow up/down
and other shortcuts - Customization freedom — use any HTML and CSS to style inputs (try 6 Retina-ready skins)
- No jQuery and Zepto
- Screenreader accessible inputs — ARIA attributes for VoiceOver and others
- Lightweight size
By default, iCheck doesn't provide any CSS styles for wrapper divs (if you don't use skins).
Usage
npm install react-icheck icheck --save
import 'icheck/skins/all.css'; // or single skin css
import {Checkbox, Radio} from 'react-icheck';
// Checkbox with label
<Checkbox
checkboxClass="icheckbox_square-blue"
increaseArea="20%"
label="Checkbox"
/>
// without label
<Checkbox
id="checkbox1"
checkboxClass="icheckbox_square-blue"
increaseArea="20%"
/>
<label htmlFor="checkbox1">First name</label>
// Radio
<Radio
name="aa"
radioClass="iradio_square-blue"
increaseArea="20%"
label="Radio"
/>
import {Radio, RadioGroup} from 'react-icheck';
<RadioGroup name="radio" value="3">
<Radio
value="3"
radioClass="iradio_square-blue"
increaseArea="20%"
label="Radio, <span class='label1'>#input-3</span>"
/>
<Radio
value="4"
radioClass="iradio_square-blue"
increaseArea="20%"
label="Radio, <span class='label1'>#input-4</span>"
/>
<Radio
value="5"
radioClass="iradio_square-blue"
increaseArea="20%"
label="Radio, <span class='label1'>#disabled</span>"
disabled
/>
</RadioGroup>
More examples: Online demo, Source
Browser support
iCheck is verified to work in Internet Explorer 6+, Firefox 2+, Opera 9+, Google Chrome and Safari browsers. Should also work in many others.
Mobile browsers (like Opera mini, Chrome mobile, Safari mobile, Android browser, Silk and others) are also supported. Tested on iOS (iPad, iPhone, iPod), Android, BlackBerry and Windows Phone devices.
Contribute
Dev base on react-component-tools
$ git clone https://github.com/luqin/react-icheck.git
$ cd react-icheck
$ npm install
$ npm start # Run the docs site in development mode. This will watch for file changes as you work. And auto refresh the page to see the updates.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].