@payfit/unity-components
Version:
34 lines (33 loc) • 2.18 kB
TypeScript
import { PropsWithChildren, ReactNode } from 'react';
import { FieldPath, FieldValues } from 'react-hook-form';
import { LabelProps } from '../label/Label.js';
export interface SelectableCardRadioGroupFieldProps<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;
/** Feedback text to display, typically used for error messages. */
feedbackText?: ReactNode;
}
/**
* The `SelectableCardRadioGroupField` component renders a group of mutually exclusive selectable card options within a form field.
* Use it to collect a single selection from users in a visually appealing and accessible manner.
* @example
* ```tsx
* import { SelectableCardRadioGroupField, SelectableCardRadio } from '@payfit/unity-components'
*
* <SelectableCardRadioGroupField name="option" label="Choose an option">
* <SelectableCardRadio value="option1">Option 1</SelectableCardRadio>
* <SelectableCardRadio value="option2">Option 2</SelectableCardRadio>
* <SelectableCardRadio value="option3">Option 3</SelectableCardRadio>
* </SelectableCardRadioGroupField>
* ```
* @see {@link SelectableCardRadioGroupFieldProps} for all available props
* @remarks [API Docs](https://unity-components.payfit.io/?path=/docs/forms-selectablecard-selectablecardcheckboxgroupfield--docs) • [Design Docs](https://www.payfit.design/24f360409/p/05fc26-selectable-card)
* @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 SelectableCardRadioGroupField: import('react').ForwardRefExoticComponent<SelectableCardRadioGroupFieldProps<FieldValues, string> & import('react').RefAttributes<HTMLDivElement>>;
export { SelectableCardRadioGroupField };