ziad-saab / React Checkbox Group
Sensible checkbox groups manipulation for DOM.
Stars: ✭ 109
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
Projects that are alternatives of or similar to React Checkbox Group
Formbase
Better default styles for common input elements.
Stars: ✭ 560 (+413.76%)
Mutual labels: checkbox
Nb Choices
Angular wrapper for choices.js, vanilla, lightweight, configurable select box/text input plugin
Stars: ✭ 32 (-70.64%)
Mutual labels: checkbox
Selectionlist
Simple single-selection or multiple-selection checklist, based on UITableView
Stars: ✭ 93 (-14.68%)
Mutual labels: checkbox
Css Checkbox Library
A huge library of Pure CSS Checkboxes for every taste.
Stars: ✭ 679 (+522.94%)
Mutual labels: checkbox
Prompt Checkbox
This repository has been archived, use Enquirer instead.
Stars: ✭ 21 (-80.73%)
Mutual labels: checkbox
Ckdcss
A tiny set of micro interactions for your checkboxes.
Stars: ✭ 49 (-55.05%)
Mutual labels: checkbox
Checkbox.css
☑️ Tiny set of pure CSS animations for your checkbox input. https://720kb.github.io/checkbox.css/
Stars: ✭ 478 (+338.53%)
Mutual labels: checkbox
Vue Table Dynamic
🎉 A dynamic table with sorting, filtering, editing, pagination, multiple select, etc.
Stars: ✭ 106 (-2.75%)
Mutual labels: checkbox
React Native Round Checkbox
iOS-styled round checkbox for RN
Stars: ✭ 27 (-75.23%)
Mutual labels: checkbox
Aiflatswitch
Nicely animated flat design switch alternative to UISwitch
Stars: ✭ 904 (+729.36%)
Mutual labels: checkbox
Form Js
Easily create web forms. Supports Meteor, AngularJS, React, Polymer and any CSS library, e.g. Bootstrap.
Stars: ✭ 9 (-91.74%)
Mutual labels: checkbox
Compoundbuttongroup
An Android library to easily implement compound buttons
Stars: ✭ 52 (-52.29%)
Mutual labels: checkbox
Bootstrap Switch
Turn checkboxes and radio buttons in toggle switches.
Stars: ✭ 5,132 (+4608.26%)
Mutual labels: checkbox
Vue Checkbox Radio
Checkbox and radio component for Vue.js
Stars: ✭ 99 (-9.17%)
Mutual labels: checkbox
Vue Svg Map
A set of Vue.js components to display an interactive SVG map
Stars: ✭ 48 (-55.96%)
Mutual labels: checkbox
Xamarincontrols
Cross-platform controls for Xamarin and Xamarin.Forms.
Stars: ✭ 104 (-4.59%)
Mutual labels: checkbox
Magic Input
CSS3 Styles for Checkbox and Radio Button inputs look prettier. with only one element.
Stars: ✭ 81 (-25.69%)
Mutual labels: checkbox
React-checkbox-group
This is your average checkbox group:
<form>
<input
onChange="{handleFruitChange}"
type="checkbox"
name="fruit"
value="apple"
/>Apple
<input
onChange="{handleFruitChange}"
type="checkbox"
name="fruit"
value="orange"
/>Orange
<input
onChange="{handleFruitChange}"
type="checkbox"
name="fruit"
value="watermelon"
/>Watermelon
</form>
Repetitive, hard to manipulate and easily desynchronized.
Lift up name
and onChange
, and give the group an initial checked values array.
See below for a complete example
Install
npm install react-checkbox-group
or
yarn add react-checkbox-group
Simply require/import it to use it:
import CheckboxGroup from 'react-checkbox-group'
Example
import React, { useState, useEffect } from 'react'
import CheckboxGroup from 'react-checkbox-group'
const Demo = () => {
// Initialize the checked values
const [fruits, setFruits] = useState<string[]>(['apple', 'watermelon'])
useEffect(() => {
const timer = setTimeout(() => {
setFruits(['apple', 'orange'])
}, 5000)
return () => clearTimeout(timer)
}, [])
return (
<CheckboxGroup name="fruits" value={fruits} onChange={setFruits}>
{(Checkbox) => (
<>
<label>
<Checkbox value="apple" /> Apple
</label>
<label>
<Checkbox value="orange" /> Orange
</label>
<label>
<Checkbox value="watermelon" /> Watermelon
</label>
</>
)}
</CheckboxGroup>
)
}
ReactDOM.render(<Demo />, document.body)
License
MIT.
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].