@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
63 lines (62 loc) • 3.26 kB
TypeScript
import { FieldsetHTMLAttributes, JSX } from 'react';
import { FieldsetProps } from '../Fieldset/Fieldset';
export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
/** DSCheckbox elements within the checkbox group. */
children: React.ReactNode;
/**
* The `legend` prop can either be a simple `string` or an object with specific properties.
* When provided as a string, it represents the legend text directly.
* When provided as an object, it allows for more detailed configuration, including:
* - `headingText: string` The text content for the legend.
* - `headingSize?: 'x-large' | 'x-large-uppercase' | 'large' | 'large-uppercase' | 'medium' | 'medium-uppercase' | 'small' | 'small-uppercase'` Defines the size of the heading, using predefined size types, defaults to `'medium'`
* - `headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'` Specifies the HTML tag to be used for the heading, such as 'h1', 'h2', etc., defaults to `'h2'`
*
* @prop {string | { headingText: string; headingSize?: HeadingSize; headingTag?: HeadingTag; }} legend
*/
legend: FieldsetProps['legend'];
/** Short descriptive text displayed beneath the legend. */
description?: FieldsetProps['description'];
/**
* Set the direction of the checkboxes.
* @default 'vertical'
*/
direction?: 'vertical' | 'horizontal';
/** Disables the checkbox group, preventing user interaction.
* @default false
*/
disabled?: boolean;
/** Unique id for the checkbox group, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set. */
id?: string;
/** Marks the checkbox group as invalid, typically used for form validation.
* @default false
*/
invalid?: boolean;
/** Shows an info button next to the label that triggers a popover with the passed content. */
popoverContent?: React.ReactNode;
/** Popover info button props:
*
* `data-*`: Custom data attributes.
*
* `label`: Accessibility label for the default anchor button.
* (default) 'Toggle popover'
*/
popoverInfoButtonProps?: {
[key: `data-${string}`]: string | undefined;
label?: string;
};
/** Marks the checkbox group as required.
* When this property is set, an asterisk (*) is automatically appended to the checkbox group's legend.
* @default false
* */
required?: boolean;
/** Defines a system feedback message, shown when `invalid={true}`. */
systemFeedback?: string;
}
/**
* The `DSCheckboxGroup` component offers a cohesive and accessible solution for grouping `DSCheckbox` elements,
* complete with customizable legends, direction options, and integrated validation feedback,
* enhancing the user experience in form designs.
*
* Design in Figma: [Checkbox Group](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=5626-11362&t=UBsmFURFENnuYSW1-4)
* */
export declare const DSCheckboxGroup: ({ children, legend, className, description, direction, disabled, id, invalid, popoverContent, popoverInfoButtonProps, required, systemFeedback, ...rest }: CheckboxGroupProps) => JSX.Element;