Checkbox is used for a list of selections that are meant to have one or more options checked.
import React from 'react' import { Checkbox } from '../../' const CheckboxDefault = (props) => { return ( <div> <Checkbox name="default name" tabIndex={0} text="Checkbox label" value="default value" {...props} /> </div> ) } export default CheckboxDefault
import React from 'react' import { Checkbox } from '../../' const CheckboxChecked = (props) => { return ( <div> <Checkbox checked name="checkbox-name" text="Checked Checkbox" value="check-box value" {...props} /> </div> ) } export default CheckboxChecked
import React, { useState } from 'react' import { Checkbox } from '../../' const CheckboxCustom = (props) => { const [checked, setChecked] = useState(false) const handleOnChange = () => { setChecked(!checked) } return ( <div> {`The checkbox is ${checked ? 'checked' : 'unchecked'}.`} <br /> <br /> <div> <Checkbox text="Toggle Me" {...props} > <input checked={checked} name="custom-name" onChange={handleOnChange} type="checkbox" value="custom-value" {...props} /> </Checkbox> </div> </div> ) } export default CheckboxCustom
import React from 'react' import { Checkbox } from '../..' const CheckboxError = (props) => { return ( <div> <Checkbox error name="default name" text="Checkbox label" value="default value" {...props} /> </div> ) } export default CheckboxError