Code

Props

Props	Data Type	Required
value	string	✅
className	string	❌
id	string	✅
name	string	❌
label	string	❌
checked	boolean	❌
indeterminate	boolean	❌
error	boolean	❌
disabled	boolean	❌
onChange	function	❌

This component is one of the fews that only have a onChange event

Event Response

Property	Data Type
id	string
name	string
value	string
label	string
checked	boolean

onChange

import React, {useState} from 'react';
import {Checkbox} from '@2600hz/sds-react-components';

const Example = ()=>{
    const [checkboxList, setCheckboxList] = useState({
        //In this case, instead capturing the value, for the example we only
        //want to know if the component is checked or not
        first: false,
        second: false
    });
    
    const updateState = (e)=>{
        setCheckboxList(prevState => ({
            ...prevState,
            [e.id]: e.checked
        }));
    }
    
    return(
        <div className='container'>
            <Checkbox 
                id='first' 
                value='element1' 
                label='Element 1' 
                onChange={updateState} 
            />
            <Checkbox 
                id='second' 
                value='element2' 
                label='Element 2'
                onChange={updateState} 
            />
        </div>
    )
}

Components Dependency

For this component elaboration there were used the following internal components:

• Label

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

React

Form Controls / Checkbox - Checkboxt With Label ⋅ Storybooksipster-react-component-storybook.netlify.app