@patreon/studio/module/components/Radio/RadioGroup/types.d.ts

Patreon Studio Design System

import type { ButtonAlignment, RadioButtonProps } from '../RadioButton/types';
export interface RadioGroupProps {
    /**
     * Required: send RadioButton children to render as list items in the group
     */
    children: Array<React.ReactElement<RadioButtonProps>>;
    /**
     * Can also be considered a default value or starting point for radio button state.
     * This value is used read to determine a RadioButton's checked state.
     */
    currentValue: string | string[] | number;
    'data-tag'?: string;
    /**
     * Necessary to activate aria-label property when not using a visible label.
     * A translated label is still required when hiding the label!
     */
    hideLabel?: boolean;
    /**
     * HTML ID
     */
    id?: string;
    /**
     * Aligns the radio buttons horizontally instead of vertically
     * @default false
     */
    inline?: boolean;
    /**
     * Required `label` prop conveys purpose of RadioGroup to viewers and screen readers.
     * You may create a custom node label or pass in a single string.
     * Use `hideLabel` to activate an aria-label.
     */
    label: React.ReactNode | string;
    /**
     * Called when a RadioButton child is clicked
     */
    onChange: (e: Pick<React.ChangeEvent<HTMLInputElement>, 'target'>) => void;
    /**
     * Name of the group, used to link radio buttons together in HTML.
     * Passed along to RadioButton children.
     * Included as required prop, although InputHTMLAttributes has it as optional
     */
    name: string;
    /**
     * Margin between radio buttons, in rems
     * @default 2
     */
    spacing?: number;
    /**
     * Whether or not to align the button on the right or the left.
     * @default 'left'
     */
    alignButton?: ButtonAlignment;
}