import { CommonProps, Refable } from "@trackunit/react-components";
import { ChangeEvent, InputHTMLAttributes, ReactElement, ReactNode } from "react";
export interface RadioGroupProps<TValue extends string | number> extends CommonProps, Refable<HTMLDivElement>, InputHTMLAttributes<HTMLInputElement> {
    /**
     */
    children: ReactNode;
    /**
     * The id of the radio group.
     */
    id: string;
    /**
     * onChange handler for the radio group.
     */
    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
    /**
     * The value of the radio group.
     */
    value: TValue;
    /**
     * The name of the radio group.
     */
    name?: string;
    /**
     * The label of the radio group.
     */
    label?: string;
    /**
     * Whether the radiogroup is inline or not.
     */
    inline?: boolean;
    /**
     * Whether the radio group is disabled or not.
     */
    disabled?: boolean;
    /**
     * A boolean flag to set invalid mode
     * can be used for indicating errors
     */
    isInvalid?: boolean;
}
/**
 * Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.
 *
 * Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
 *
 * ### When to use
 * Use RadioGroup in forms, settings, or selections in a list where only one option can be selected.
 *
 * ### When not to use
 * Do not use RadioGroup if a user can select many options from a list. Use Checkbox instead.
 *
 * @example Basic radio group
 * ```tsx
 * import { RadioGroup, RadioItem } from "@trackunit/react-form-components";
 * import { useState, ChangeEvent } from "react";
 *
 * const MyForm = () => {
 *   const [size, setSize] = useState("medium");
 *
 *   return (
 *     <RadioGroup
 *       id="size-selection"
 *       label="Select size"
 *       value={size}
 *       onChange={(e: ChangeEvent<HTMLInputElement>) => setSize(e.target.value)}
 *     >
 *       <RadioItem label="Small" value="small" />
 *       <RadioItem label="Medium" value="medium" />
 *       <RadioItem label="Large" value="large" />
 *     </RadioGroup>
 *   );
 * };
 * ```
 * @example Inline radio group with descriptions
 * ```tsx
 * import { RadioGroup, RadioItem } from "@trackunit/react-form-components";
 * import { useState, ChangeEvent } from "react";
 *
 * const PlanSelector = () => {
 *   const [plan, setPlan] = useState("basic");
 *
 *   return (
 *     <RadioGroup
 *       id="plan-selection"
 *       label="Choose your plan"
 *       value={plan}
 *       onChange={(e: ChangeEvent<HTMLInputElement>) => setPlan(e.target.value)}
 *       inline
 *     >
 *       <RadioItem label="Basic" value="basic" description="$9/month" />
 *       <RadioItem label="Pro" value="pro" description="$29/month" />
 *       <RadioItem label="Enterprise" value="enterprise" description="Contact us" />
 *     </RadioGroup>
 *   );
 * };
 * ```
 * @param {RadioGroupProps} props - The props for the RadioGroup component
 * @returns {ReactElement} RadioGroup component
 */
export declare const RadioGroup: {
    <TValue extends string | number = string>({ children, id, name, value, disabled, onChange, label, inline, className, "data-testid": dataTestId, isInvalid, style, ref, }: RadioGroupProps<TValue>): ReactElement;
    displayName: string;
};