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>

<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> ); }

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>
  );
}

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' },
	},
};

Props