@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
81 lines (80 loc) • 4.25 kB
TypeScript
import { FieldsetHTMLAttributes } from 'react';
import { FieldsetProps } from '../Fieldset/Fieldset';
import { RadioGroupOption } from './RadioGroup.utils';
export interface RadioGroupProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
/**
* 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'];
/** Name of the radio group. */
name: string;
/**
* An array of RadioGroupOption Objects containing the label and the value of each Radio Button.
* `{label: string; value: string; className?: string; customArea?: React.ReactNode; isCustomAreaAbove?: boolean; hint?: string}[]`
* @prop {{label: string; value: string; className?: string; customArea?: React.ReactNode; isCustomAreaAbove?: boolean; hint?: string;}[]} options
*/
options: RadioGroupOption[];
/** Value of the selected Option in **uncontrolled RadioGroup** component. */
defaultValue?: string;
/** Short descriptive text displayed beneath the legend. */
description?: FieldsetProps['description'];
/**
* Set the direction of the radio buttons.
* `direction="horizontal"` is not possible if a `hint` or `customArea` is passed to the `options`.
* @default 'vertical'
*/
direction?: 'vertical' | 'horizontal';
/** Disables the radio group, preventing user interaction.
* @default false
*/
disabled?: boolean;
/** Controls whether the hint is displayed when the radio buttons are not checked. If set to `false` labels of radio buttons with hints will be displayed in bold.
* @default false
*/
hideUncheckedHints?: boolean;
/** Unique id for the radio group, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set. */
id?: string;
/** Marks the radio 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 radio group as required.
* When this property is set, an asterisk (*) is automatically appended to the radio group's legend.
* @default false
* */
required?: boolean;
/** Defines a system feedback message, shown when `invalid={true}`. */
systemFeedback?: string;
/** Set the value of the selected option. */
value?: string;
/** Callback function called when the value of the radio group changes. */
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}
/**
* The `DSRadioGroup` component offers a cohesive and accessible solution for grouping radio buttons,
* complete with customizable legends, direction options, and integrated validation feedback,
* enhancing the user experience in form designs.
*
* Design in Figma: [Radio Group](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=860-2728)
* */
export declare const DSRadioGroup: import('react').ForwardRefExoticComponent<RadioGroupProps & import('react').RefAttributes<HTMLInputElement>>;