CheckboxGroup
The most common use case for CheckboxGroup
is a "select all" / children scenario. This particular
configuration is built-in and is activated by passing the selectAll
prop.
Installation
npm i boundless-checkbox-group --save
Then use it like:
/** @jsx createElement */ import createElement PureComponent from 'react';import CheckboxGroup from 'boundless-checkbox-group';import filter map merge some from 'lodash'; state = items: inputProps: checked: false name: 'likes-science' label: 'Science' inputProps: checked: false name: 'likes-math' label: 'Mathematics' inputProps: checked: false name: 'likes-tech' label: 'Technology' inputProps: checked: false name: 'likes-art' label: 'Art' inputProps: checked: false name: 'likes-sports' label: 'Sports' { this; } { this; } { this; } { this; } { this; } { this; } { if const liked = ; const lastIndex = likedlength - 1; return <p>You said you like: likedlength === 1 ? liked0 : liked 'and' liked </p> ; } { return <div> <p>What subjects are you interested in?</p> <CheckboxGroup ='checkbox-group-demo' = = = = = = = /> <br /> this </div> ); }}
CheckboxGroup can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:
npm i boundless --save
the ES6 import
statement then becomes like:
;
Props
Note: only top-level props are in the README, for the full list check out the website.
Required Props
-
items
· the data wished to be rendered, each item must conform to the Checkbox prop specExpects Default Value array
[]
Optional Props
-
*
· any React-supported attributeExpects Default Value any
n/a
-
component
· override the wrapper HTML element if desiredExpects Default Value string
'div'
-
onAllChecked
· called when all children become checked (not fired on first render), no returnExpects Default Value function
() => {}
-
onAllUnchecked
· called when all children become unchecked (not fired on first render), no returnExpects Default Value function
() => {}
-
onChildChecked
· called when a specific child has become checked, returns the child definitionExpects Default Value function
() => {}
-
onChildUnchecked
· called when a specific child has become checked, returns the child definitionExpects Default Value function
() => {}
-
selectAll
· renders a master checkbox that can manipulate the values of all children simultaneouslyExpects Default Value CheckboxGroup.selectAll.BEFORE or CheckboxGroup.selectAll.AFTER or CheckboxGroup.selectAll.NONE
CheckboxGroup.selectAll.BEFORE
-
selectAllProps
· must conform to the Checkbox prop specExpects Default Value object
{}
Reference Styles
Stylus
You can see what variables are available to override in variables.styl.
// Redefine any variables as desired, e.g:color-accent = royalblue // Bring in the component styles; they will be autoconfigured based on the above@require "node_modules/boundless-checkbox-group/style"
CSS
If desired, a precompiled plain CSS stylesheet is available for customization at /build/style.css
, based on Boundless's default variables.