@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
56 lines (55 loc) • 2.77 kB
TypeScript
import { FieldsetHTMLAttributes, JSX } from 'react';
import { Legend } from './Fieldset.utils';
export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
/** Child elements within the fieldset. */
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: Legend;
/** Short descriptive text displayed beneath the legend. */
description?: string | React.ReactNode;
/** Disables the fieldset, preventing user interaction.
* @default false
*/
disabled?: boolean;
/** Unique id for the fieldset, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set. */
id?: string;
/** Marks the fieldset 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;
};
/**
* Undocumented property for visually setting the Asterisk.
* @default false
*/
required?: boolean;
/** Defines a system feedback message, shown when `invalid={true}`. */
systemFeedback?: string;
}
/**
* The `DSFieldset` component is a versatile and accessible way to group related elements and labels in your forms.
*
* Design in Figma: [Fieldset](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/Web-Pattern-Library?node-id=8-154)
* */
export declare const DSFieldset: ({ children, legend, className, description, disabled, id, invalid, popoverContent, popoverInfoButtonProps, required, systemFeedback, ...rest }: FieldsetProps) => JSX.Element;