CheckboxGroup.mdx

import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';

import { Alert } from '../../components'; import CheckboxGroup from '../../components/Checkbox/CheckboxGroup';

import { Header } from '../shared';

import { Default, WithChildren, Inline, WithSharedErrorMessage, ButtonGroup, ControlledGroup, } from './CheckboxGroup.stories.jsx';

import EvaluationForm from '../../stories/shared/EvaluationForm'

CheckboxGroup component has the ability to manage and get values from a single onChange callback prop and apply a single error message to a group of checkboxes. Checkbox groups are used when the user can select none, one, or more than one option.

• Importing and usage
• API
• Examples

Importing and usage

import CheckboxGroup from '@catho/quantum/Checkbox/CheckboxGroup';

Also, it's possible use an alternative way to instantiate checkbox items using children:

API

Examples

With shared error message

Button Group

Inline

Controlled example

A controlled group triggers its changes via onChange callback prop, which is called with the current changed checkbox event and a list of checkbox values.