View Source

CheckboxGroup

A controller view for managing the aggregate state of multiple, related checkboxes.

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

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:

import { CheckboxGroup } from 'boundless';

Demo

What subjects are you interested in?


Show Implementation

Props#

Required Props#

NameImplementationDescription
items
Expects
array
Default Value
[]

the data wished to be rendered, each item must conform to the Checkbox prop spec

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

Optional Props#

NameImplementationDescription
*
Expects
any

any React-supported attribute

component
Expects
string
Default Value
'div'

override the wrapper HTML element if desired

onAllChecked
Expects
function
Default Value
() => {}

called when all children become checked (not fired on first render), no return

onAllUnchecked
Expects
function
Default Value
() => {}

called when all children become unchecked (not fired on first render), no return

onChildChecked
Expects
function
Default Value
() => {}

called when a specific child has become checked, returns the child definition

onChildUnchecked
Expects
function
Default Value
() => {}

called when a specific child has become checked, returns the child definition

selectAll
Expects
CheckboxGroup.selectAll.BEFORE or
CheckboxGroup.selectAll.AFTER or
CheckboxGroup.selectAll.NONE
Default Value
CheckboxGroup.selectAll.BEFORE

renders a master checkbox that can manipulate the values of all children simultaneously

selectAllProps
Expects
object
Default Value
{}

must conform to the Checkbox prop spec

*
Expects
any

any React-supported attribute

label
Expects
string

the text or renderable node to display next to the checkbox

inputProps
Expects
object