CheckboxGroup
Uncontrolled
Result
Loading...
Live Editor
<CheckboxGroup label="Uncontrolled Checkbox Group" defaultValue={['pears', 'strawberries']}><CheckboxGroup.Item value="apples" label="Apples" /><CheckboxGroup.Item value="pears" label="Pears" /><CheckboxGroup.Item value="bananas" label="Bananas" /><CheckboxGroup.Item value="melons" label="Melons" /><CheckboxGroup.Item value="strawberries" label="Strawberries" /></CheckboxGroup>
Controlled
Result
Loading...
Live Editor
function Example() {const [value, setValue] = useState([]);return (<CheckboxGroup label="Controlled Checkbox Group" value={value} onChange={setValue}><CheckboxGroup.Item value="apples" label="Apples" /><CheckboxGroup.Item value="pears" label="Pears" /><CheckboxGroup.Item value="bananas" label="Bananas" /><CheckboxGroup.Item value="melons" label="Melons" /><CheckboxGroup.Item value="strawberries" label="Strawberries" /></CheckboxGroup>);}
Size
Result
Loading...
Live Editor
<><CheckboxGroup label="Small Checkbox Group" value="pears" size="sm" className="mb-3"><CheckboxGroup.Item value="apples" label="Apples" /><CheckboxGroup.Item value="pears" label="Pears" /><CheckboxGroup.Item value="bananas" label="Bananas" /></CheckboxGroup><CheckboxGroup label="Medium Checkbox Group" value="pears" size="md" className="mb-3"><CheckboxGroup.Item value="apples" label="Apples" /><CheckboxGroup.Item value="pears" label="Pears" /><CheckboxGroup.Item value="bananas" label="Bananas" /></CheckboxGroup><CheckboxGroup label="Large Checkbox Group" value="pears" size="lg" className="mb-3"><CheckboxGroup.Item value="apples" label="Apples" /><CheckboxGroup.Item value="pears" label="Pears" /><CheckboxGroup.Item value="bananas" label="Bananas" /></CheckboxGroup><CheckboxGroup label="Extra Large Checkbox Group" value="pears" size="xl" className="mb-3"><CheckboxGroup.Item value="apples" label="Apples" /><CheckboxGroup.Item value="pears" label="Pears" /><CheckboxGroup.Item value="bananas" label="Bananas" /></CheckboxGroup></>
States
Result
Loading...
Live Editor
<><CheckboxGrouplabel="Valid Checkbox Group"value="pears"isValidvalidText="Valid text"className="mb-3"><CheckboxGroup.Item value="apples" label="Apples" /><CheckboxGroup.Item value="pears" label="Pears" /><CheckboxGroup.Item value="bananas" label="Bananas" /></CheckboxGroup><CheckboxGrouplabel="Error Checkbox Group"value="pears"isInvaliderrorText="Error text"className="mb-3"><CheckboxGroup.Item value="apples" label="Apples" /><CheckboxGroup.Item value="pears" label="Pears" /><CheckboxGroup.Item value="bananas" label="Bananas" /></CheckboxGroup><CheckboxGrouplabel="Warning Checkbox Group"value="pears"isWarningwarningText="Warning Text"className="mb-3"><CheckboxGroup.Item value="apples" label="Apples" /><CheckboxGroup.Item value="pears" label="Pears" /><CheckboxGroup.Item value="bananas" label="Bananas" /></CheckboxGroup></>
Light
Used when the checkbox group is on a dark background
Result
Loading...
Live Editor
<div className="p-3 bg-primary"><CheckboxGroup label="Light Checkbox Group" value="pears" light className="mb-3"><CheckboxGroup.Item value="apples" label="Apples" /><CheckboxGroup.Item value="pears" label="Pears" /><CheckboxGroup.Item value="bananas" label="Bananas" /></CheckboxGroup></div>
Analytics
The CheckboxGroup component is trackable through Kyber Analytics. This is the default analytics config.
export default {
value: 'CheckboxGroup',
actions: {
onChange: { type: 'CHECKBOXGROUP_CHANGE', payload: 'Change' },
},
};