@payfit/unity-components
Version:
50 lines (49 loc) • 2.5 kB
TypeScript
import { PropsWithChildren, ReactNode } from 'react';
import { FieldPath, FieldValues } from 'react-hook-form';
import { LabelProps } from '../label/Label.js';
/**
* RadioButtonGroupField component provides a form field with radio button group functionality.
* It integrates with React Hook Form for form state management and validation.
* @template TFieldValues - The type of the form values
* @template TName - The type of the field name
*/
interface RadioButtonGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends PropsWithChildren<Pick<LabelProps, 'isRequired' | 'requiredVariant'>> {
/** The name of the field, which should match the form schema. */
name: TName;
/** The label for the radio button group. */
label: string;
/** Helper text to display below the radio button group. */
helperText?: ReactNode;
/** Whether the radio button group is disabled. */
isDisabled?: boolean;
/** Whether the radio button group is read-only. */
isReadOnly?: boolean;
/** Whether the radio button group is invalid. */
isInvalid?: boolean;
/** Feedback text to display, typically used for error messages. */
feedbackText?: ReactNode;
}
/**
* A form field component that wraps a group of radio buttons.
*
* This component provides a complete form field with label, helper text, and validation feedback.
* It integrates with React Hook Form for form state management and validation.
* @example
* ```tsx
* <RadioButtonGroupField
* name="fruit"
* label="Choose your favorite fruit"
* helperText="Select one option"
* >
* <RadioButton value="Apple">Apple</RadioButton>
* <RadioButton value="Banana">Banana</RadioButton>
* <RadioButton value="Orange">Orange</RadioButton>
* </RadioButtonGroupField>
* @remarks
* [API & Docs](https://master--66fe6715241b661107117e47.chromatic.com/?path=/docs/forms-radiobuttongroupfield--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/43631a-radio-group)
* ```
* @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
* @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
*/
declare const RadioButtonGroupField: import('react').ForwardRefExoticComponent<RadioButtonGroupFieldProps<FieldValues, string> & import('react').RefAttributes<HTMLDivElement>>;
export { RadioButtonGroupField };