carbon-react
Version:
A library of reusable React components for easily building user interfaces.
56 lines (55 loc) • 2.94 kB
TypeScript
import React from "react";
import { MarginProps } from "styled-system";
import { TagProps } from "../../../__internal__/utils/helpers/tags/tags";
import { ValidationProps } from "../../../__internal__/validations";
export interface RadioButtonGroupProps extends ValidationProps, MarginProps, TagProps {
/**
* Unique identifier for the component.
* Will use a randomly generated GUID if none is provided.
*/
id?: string;
/** Breakpoint for adaptive legend (inline labels change to top aligned). Enables the adaptive behaviour when set */
adaptiveLegendBreakpoint?: number;
/** Breakpoint for adaptive spacing (left margin changes to 0). Enables the adaptive behaviour when set */
adaptiveSpacingBreakpoint?: number;
/** The RadioButton objects to be rendered in the group */
children: React.ReactNode;
/** When true, RadioButtons children are in line */
inline?: boolean;
/** Spacing between labels and radio buttons, given number will be multiplied by base spacing unit (8) */
labelSpacing?: 1 | 2;
/** The content for the RadioButtonGroup Legend */
legend?: string;
/**
* The content for the RadioButtonGroup hint text,
* will only be rendered when `validationRedesignOptIn` is true.
*/
legendHelp?: string;
/** [Legacy] Text alignment of legend when inline */
legendAlign?: "left" | "right";
/** [Legacy] When true, legend is placed in line with the RadioButtons */
legendInline?: boolean;
/** [Legacy] Spacing between legend and field for inline legend, number multiplied by base spacing unit (8) */
legendSpacing?: 1 | 2;
/** [Legacy] Percentage width of legend (only when legend is inline) */
legendWidth?: number;
/** Specifies the name prop to be applied to each button in the group */
name: string;
/** Callback fired when each RadioButton is blurred */
onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
/** Callback fired when the user selects a RadioButton */
onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
/** Flag to configure component as mandatory */
required?: boolean;
/** value of the selected RadioButton */
value: string;
/** [Legacy] Overrides the default tooltip position */
tooltipPosition?: "top" | "bottom" | "left" | "right";
/** Render the ValidationMessage above the RadioButton inputs when validationRedesignOptIn flag is set */
validationMessagePositionTop?: boolean;
}
export declare const RadioButtonGroup: {
({ children, id, name, legend, legendHelp, error, warning, info, onBlur, onChange, value, inline, legendInline, legendWidth, legendAlign, legendSpacing, labelSpacing, adaptiveLegendBreakpoint, adaptiveSpacingBreakpoint, required, tooltipPosition, validationMessagePositionTop, ...rest }: RadioButtonGroupProps): React.JSX.Element;
displayName: string;
};
export default RadioButtonGroup;