@payfit/unity-components
Version:
48 lines (47 loc) • 2.14 kB
TypeScript
import { VariantProps } from '@payfit/unity-themes';
import { ReactNode } from 'react';
import { CheckboxFieldProps as AriaCheckboxFieldProps } from 'react-aria-components/Checkbox';
import { selectableCard } from '../../selectableCard.variant.js';
export interface SelectableCardCheckboxProps extends Omit<AriaCheckboxFieldProps, 'children'>, VariantProps<typeof selectableCard> {
/**
* The title of the selectable card.
*/
title: string;
/**
* Optional description text to display below the title.
*/
description?: string;
/**
* Optional illustration to display in the card.
*/
illustration?: ReactNode;
}
/**
* The `SelectableCardCheckbox` component renders a selectable card with a checkbox.
* It is designed to be used within a `SelectableCardCheckboxGroup` component.
* @param {string} props.title - The title of the selectable card
* @param {string} [props.description] - Optional description text to display below the title
* @param {ReactNode} [props.illustration] - Optional illustration to display in the card
* @param {string} props.value - The value of the checkbox, used for selection in the checkbox group
* @example
* ```tsx
* import { SelectableCardCheckbox, SelectableCardCheckboxGroup } from '@payfit/unity-components'
*
* <SelectableCardCheckboxGroup>
* <SelectableCardCheckbox
* title="Option 1"
* description="Description for option 1"
* value="option1"
* />
* <SelectableCardCheckbox
* title="Option 2"
* description="Description for option 2"
* value="option2"
* />
* </SelectableCardCheckboxGroup>
* ```
* @see {@link SelectableCardCheckboxProps} for all available props
* @remarks [API Docs](https://unity-components.payfit.io/?path=/docs/inputs-selectablecardgroup-selectablecardcheckboxgroup-selectablecardcheckbox--docs) • [Design Docs](https://www.payfit.design/24f360409/p/05fc26-selectable-card)
*/
declare const SelectableCardCheckbox: import('react').ForwardRefExoticComponent<SelectableCardCheckboxProps & import('react').RefAttributes<HTMLLabelElement>>;
export { SelectableCardCheckbox };