@porsche-design-system/components-react
Version:
Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.
151 lines (150 loc) • 6.23 kB
TypeScript
import type { BaseProps } from '../../BaseProps';
import type { BreakpointCustomizable, RadioGroupDirection, RadioGroupChangeEventDetail, RadioGroupState } from '../types';
export type PRadioGroupProps = BaseProps & {
/**
* Reduces the spacing between radio options for use in dense layouts where vertical space is limited.
* @default false
*/
compact?: boolean;
/**
* Sets a supplementary description displayed below the label to give users additional guidance about the radio group.
* @default ''
*/
description?: string;
/**
* Sets the layout direction of the radio options. Use `column` to stack them vertically or `row` to arrange them horizontally. Supports responsive breakpoint values.
* @default 'column'
*/
direction?: BreakpointCustomizable<RadioGroupDirection>;
/**
* Disables all radio options in the group, preventing selection and excluding the value from form submissions.
* @default false
*/
disabled?: boolean;
/**
* Associates the radio group with a form element by its ID when the group is not a direct descendant of that form.
*/
form?: string;
/**
* Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.
* @default false
*/
hideLabel?: BreakpointCustomizable<boolean>;
/**
* Sets the visible label text displayed above the radio group to identify the group's purpose.
* @default ''
*/
label?: string;
/**
* @experimental Disables all radio options and shows a spinner to indicate a background loading operation.
* @default false
*/
loading?: boolean;
/**
* Sets the validation feedback message displayed below the radio group when `state` is `success` or `error`.
* @default ''
*/
message?: string;
/**
* Sets the shared name attribute for all radio buttons in the group, grouping them for mutually exclusive selection.
*/
name: string;
/**
* Emitted when the radio group loses focus after the user interacts with it, useful for triggering validation on blur.
*/
onBlur?: (event: CustomEvent<void>) => void;
/**
* Emitted when the user selects a different option, carrying the new value and the native event in the event detail.
*/
onChange?: (event: CustomEvent<RadioGroupChangeEventDetail>) => void;
/**
* Marks the radio group as required so the form cannot be submitted until one option is selected.
* @default false
*/
required?: boolean;
/**
* Sets the validation state of the radio group, controlling its visual appearance and feedback message style (`none`, `success`, `error`).
* @default 'none'
*/
state?: RadioGroupState;
/**
* Sets the currently selected value that pre-selects the matching radio option and reflects user changes.
* @default ''
*/
value?: string;
};
export declare const PRadioGroup: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
/**
* Reduces the spacing between radio options for use in dense layouts where vertical space is limited.
* @default false
*/
compact?: boolean;
/**
* Sets a supplementary description displayed below the label to give users additional guidance about the radio group.
* @default ''
*/
description?: string;
/**
* Sets the layout direction of the radio options. Use `column` to stack them vertically or `row` to arrange them horizontally. Supports responsive breakpoint values.
* @default 'column'
*/
direction?: BreakpointCustomizable<RadioGroupDirection>;
/**
* Disables all radio options in the group, preventing selection and excluding the value from form submissions.
* @default false
*/
disabled?: boolean;
/**
* Associates the radio group with a form element by its ID when the group is not a direct descendant of that form.
*/
form?: string;
/**
* Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.
* @default false
*/
hideLabel?: BreakpointCustomizable<boolean>;
/**
* Sets the visible label text displayed above the radio group to identify the group's purpose.
* @default ''
*/
label?: string;
/**
* @experimental Disables all radio options and shows a spinner to indicate a background loading operation.
* @default false
*/
loading?: boolean;
/**
* Sets the validation feedback message displayed below the radio group when `state` is `success` or `error`.
* @default ''
*/
message?: string;
/**
* Sets the shared name attribute for all radio buttons in the group, grouping them for mutually exclusive selection.
*/
name: string;
/**
* Emitted when the radio group loses focus after the user interacts with it, useful for triggering validation on blur.
*/
onBlur?: (event: CustomEvent<void>) => void;
/**
* Emitted when the user selects a different option, carrying the new value and the native event in the event detail.
*/
onChange?: (event: CustomEvent<RadioGroupChangeEventDetail>) => void;
/**
* Marks the radio group as required so the form cannot be submitted until one option is selected.
* @default false
*/
required?: boolean;
/**
* Sets the validation state of the radio group, controlling its visual appearance and feedback message style (`none`, `success`, `error`).
* @default 'none'
*/
state?: RadioGroupState;
/**
* Sets the currently selected value that pre-selects the matching radio option and reflects user changes.
* @default ''
*/
value?: string;
} & {
children?: import("react").ReactNode | undefined;
} & import("react").RefAttributes<HTMLElement>>;