@payfit/unity-components
Version:
34 lines (33 loc) • 2.21 kB
TypeScript
import { PropsWithChildren, ReactNode } from 'react';
import { FieldPath, FieldValues } from 'react-hook-form';
import { LabelProps } from '../label/Label.js';
export interface SelectableCardCheckboxGroupFieldProps<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 `SelectableCardCheckboxGroupField` component renders a group of selectable card checkboxes within a form field.
* Use it to collect multiple selections from users in a visually appealing and accessible manner.
* @example
* ```tsx
* import { SelectableCardCheckboxGroupField, SelectableCardCheckbox } from '@payfit/unity-components'
*
* <SelectableCardCheckboxGroupField name="options" label="Choose options">
* <SelectableCardCheckbox value="option1">Option 1</SelectableCardCheckbox>
* <SelectableCardCheckbox value="option2">Option 2</SelectableCardCheckbox>
* <SelectableCardCheckbox value="option3">Option 3</SelectableCardCheckbox>
* </SelectableCardCheckboxGroupField>
* ```
* @see {@link SelectableCardCheckboxGroupFieldProps} for all available props
* @remarks [API Docs](https://unity-components.payfit.io/?path=/docs/forms-selectablecard-selectablecardradiogroupfield--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 SelectableCardCheckboxGroupField: import('react').ForwardRefExoticComponent<SelectableCardCheckboxGroupFieldProps<FieldValues, string> & import('react').RefAttributes<HTMLDivElement>>;
export { SelectableCardCheckboxGroupField };