View Source

Checkbox

An accessible checkbox with indeterminate support.

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 --save boundless-checkbox

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:

import { Checkbox } from 'boundless';

Demo

Show Implementation

Props#

Required Props#

There are no required props.

Optional Props#

NameImplementationDescription
*
Expects
any

any React-supported attribute

component
Expects
string
Default Value
'div'

any valid HTML tag name

inputProps
Expects
object
Default Value
{
    checked: false,
    indeterminate: false,
}

all input-specific props like value, name, etc should be passed here -- common ones are listed below

*
Expects
any

any React-supported attribute

checked
Expects
bool

determines if the checkbox is rendered as checked/unchecked, see React "controlled inputs")

className
Expects
string
disabled
Expects
bool

prevents the on{Checked,Unchecked} events from firing when true

id
Expects
string
indeterminate
Expects
bool

enables or disables "mixed" checkbox state, read this CSS-Tricks article for more information and examples

onChange
Expects
function
onClick
Expects
function
name
Expects
string

rendered as the input control's form name

value
Expects
string

passed-through to the input node, like name

label
Expects
any renderable
Default Value
null

any React-renderable content, most commonly a simple string

labelProps
Expects
object
Default Value
{}
*
Expects
any

any React-supported attribute

onChecked
Expects
function
Default Value
() => {}

called when the element becomes checked; backing data must be updated to persist the state change

onUnchecked
Expects
function
Default Value
() => {}

called when the element becomes unchecked; backing data must be updated to persist the state change