import { FieldsetHTMLAttributes, JSX } from 'react'; import { FieldsetProps } from '../Fieldset/Fieldset'; export interface ActionCardGroupProps extends Omit, 'onChange'> { /** The `DSActionCard` elements that make up the group. Each selectable card must use a `PrimaryAction` whose `control` matches the group's `control`. */ 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']; /** Shared name for the group. Gives radio cards their single-select behaviour and lets checkbox cards submit all checked values under one form field. */ name: string; /** * Which selection control the grouped cards use. It must match the `control` of every card's `PrimaryAction`. * - `'radio'`: single select. The group renders as a `radiogroup` and owns the selected `value`. * - `'checkbox'`: multi select. The group renders as a plain `group`, and each card owns its checked state via `checked` / `defaultChecked`. * @default 'radio' */ control?: 'radio' | 'checkbox'; /** Value of the selected card in an **uncontrolled** group. Only for `control='radio'`. */ defaultValue?: string; /** Short descriptive text displayed beneath the legend. */ description?: FieldsetProps['description']; /** * Sets the layout direction of the cards. * @default 'horizontal' */ direction?: 'horizontal' | 'vertical'; /** Disables the whole group, preventing selection of any card. * @default false */ disabled?: boolean; /** Hides the legend visually while keeping it accessible to screen readers, can be responsive. * `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }` * @default false */ hideLegend?: FieldsetProps['hideLegend']; /** Unique id for the group, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set. */ id?: string; /** Marks the group as invalid, typically used for form validation. * @default false */ invalid?: boolean; /** Shows an info button next to the legend 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 group as required. * When this property is set, an asterisk (*) is automatically appended to the group's legend. * @default false */ required?: boolean; /** Defines a system feedback message, shown when `invalid={true}`. */ systemFeedback?: string; /** Value of the selected card in a **controlled** group. Only for `control='radio'`. */ value?: string; /** Callback function called when a card's selection changes. */ onChange?: (event: React.ChangeEvent) => void; } /** * The `DSActionCardGroup` groups selectable `DSActionCard`s into an accessible * selection group: a single-select `radiogroup` with `control='radio'` (the default) * or a multi-select `group` with `control='checkbox'`. It wraps `DSFieldset` to provide * a legend, description and group-level validation, and distributes the shared `name`, * the selected value and the disabled/invalid state to the cards' primary actions. * * Design in Figma: [Action Card](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=47366-6210) * *
Looking for Selectable Card? A Selectable Card is a DSActionCard whose PrimaryAction uses control='checkbox' or control='radio' - not a separate component. This group wraps those cards. See the Selectable card section in the DSActionCard docs for the card-level API and the Selectable Card and Selectable Card Group templates for complete patterns.
*/ export declare const DSActionCardGroup: { (props: ActionCardGroupProps): JSX.Element; displayName: string; };