CheckboxGroup
<ts-checkbox-group> vv0.6.3
The ts-checkbox-group component.
Open in Storybook for interactive demos.
Preview
Section titled “Preview”<ts-checkbox-group orientation="vertical" size="md" value="[]">Content</ts-checkbox-group>Properties
Section titled “Properties”| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
disabled | disabled | boolean | false | Disables all child checkboxes. |
error | error | string | undefined | — | Error message displayed below the group. |
label | label | string | undefined | — | Accessible label for the group. |
orientation | orientation | "horizontal" | "vertical" | 'vertical' | Layout direction of the checkboxes. |
size | size | "lg" | "md" | "sm" | 'md' | Size for all child checkboxes. |
value | — | string[] | [] | The currently checked values. |
Events
Section titled “Events”| Event | Detail | Bubbles | Composed | Description |
|---|---|---|---|---|
tsChange | \{ value: string[]; \} | Yes | Yes | Emitted when the selected values change. |
| Name | Description |
|---|---|
*(default)* | Checkboxes to group. |
CSS Parts
Section titled “CSS Parts”Use ::part() to style internal elements:
| Part | Description |
|---|---|
error-text | The error message wrapper. |
group | The group container. |
label | The group label. |
ts-checkbox-group::part(error-text) { /* your custom styles */}<ts-checkbox-group orientation="vertical" size="md" value="[]">Content</ts-checkbox-group>import { TsCheckboxGroup } from '@tessera-ui/react';
<TsCheckboxGroup orientation="vertical" size="md">Content</TsCheckboxGroup>