Checkbox
Checkbox is implemented as a "controlled input", meaning it is a direct representation of the model data passed
inside. User interaction will bubble changes in the form of onChecked
and onUnchecked
that a controller
view must intercept and apply against the data provider.
Installation
npm i boundless-checkbox --save
Then use it like:
/** @jsx createElement */ import createElement PureComponent from 'react';import Checkbox from 'boundless-checkbox'; state = checkboxes: checked: false indeterminate: false label: 'An unchecked checkbox' name: 'box1' checked: true indeterminate: false label: 'A checked checkbox' name: 'box2' checked: false indeterminate: true label: 'An indeterminate (mixed) checkbox' name: 'box3' { // eslint-disable-next-line no-alert ; } { return <div ='spread'> thisstatecheckboxes </div> ; }
Checkbox 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
There are no required props.
Optional Props
-
*
· any React-supported attributeExpects Default Value any
n/a
-
component
· any valid HTML tag nameExpects Default Value string
'div'
-
inputProps
· all input-specific props likevalue
,name
, etc should be passed here -- common ones are listed belowExpects Default Value object
{ checked: false, indeterminate: false }
-
label
· any React-renderable content, most commonly a simple stringExpects Default Value any renderable
null
-
labelProps
Expects Default Value object
{}
-
onChecked
· called when the element becomes checked; backing data must be updated to persist the state changeExpects Default Value function
() => {}
-
onUnchecked
· called when the element becomes unchecked; backing data must be updated to persist the state changeExpects Default Value function
() => {}
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/style"
CSS
If desired, a precompiled plain CSS stylesheet is available for customization at /build/style.css
, based on Boundless's default variables.