Components
CheckboxGroup
Documentation for the CheckboxGroup component.
CheckboxGroup
Preview
NotificationsChoose how you want to be notified.
The CheckboxGroup component is built with React Aria and styled using StyleX.
Import
import { CheckboxGroup, Checkbox } from '@moul-dev/ui';Usage
Here is a basic example of how to use the CheckboxGroup component:
import { CheckboxGroup, Checkbox } from '@moul-dev/ui';
export default function Example() {
return (
<CheckboxGroup label="Settings" description="Configure your preferences">
<Checkbox value="cookies">Accept cookies</Checkbox>
<Checkbox value="marketing">Receive marketing</Checkbox>
</CheckboxGroup>
);
}Features
Group Variants
Setting variant on CheckboxGroup propagates the variant style (primary, secondary, or tertiary) to all nested Checkbox components automatically.
Primary Group
Secondary Group
Tertiary Group
// Nested checkboxes inherit the group's secondary variant
<CheckboxGroup label="Roles" variant="secondary">
<Checkbox value="admin">Admin</Checkbox>
<Checkbox value="user">User</Checkbox>
</CheckboxGroup>Orientation
Lays out checkboxes vertically (default) or horizontally using the orientation prop.
Horizontal Layout
<CheckboxGroup label="Horizontal Layout" orientation="horizontal">
<Checkbox value="1">Option 1</Checkbox>
<Checkbox value="2">Option 2</Checkbox>
</CheckboxGroup>Props
CheckboxGroup Props
Prop
Type
Default className: react-aria-CheckboxGroup
| Render Prop | CSS Selector |
|---|---|
isDisabled Whether the group is disabled. | [data-disabled] |
isInvalid Whether the group value is invalid. | [data-invalid] |