@payfit/unity-components
Version:
51 lines (50 loc) • 2.11 kB
TypeScript
import { VariantProps } from '@payfit/unity-themes';
import { PropsWithChildren, ReactNode } from 'react';
import { RadioFieldProps } from 'react-aria-components/RadioGroup';
import { selectableCard } from '../../selectableCard.variant.js';
export interface SelectableCardRadioProps extends Omit<RadioFieldProps, 'children'>, PropsWithChildren<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 `SelectableCardRadio` component renders a selectable card with a radio button.
* It is designed to be used within a `SelectableCardRadioGroup` component.
* @param props.title - The title of the selectable card
* @param [props.description] - Optional description text to display below the title
* @param [props.illustration] - Optional illustration to display in the card
* @param props.value - The value of the radio button, used for selection in the radio group
* @example
* ```tsx
* import { SelectableCardRadio, SelectableCardRadioGroup } from '@payfit/unity-components'
*
* <SelectableCardRadioGroup>
* <SelectableCardRadio
* title="Option 1"
* description="Description for option 1"
* value="option1"
* />
* <SelectableCardRadio
* title="Option 2"
* description="Description for option 2"
* value="option2"
* />
* </SelectableCardRadioGroup>
* ```
* @see {@link SelectableCardRadioProps} for all available props
* @remarks [API Docs](https://unity-components.payfit.io/?path=/docs/inputs-selectablecardgroup-selectablecardradiogroup-selectablecardradio--docs) • [Design Docs](https://www.payfit.design/24f360409/p/05fc26-selectable-card)
*/
declare const SelectableCardRadio: {
({ title, description, illustration, isDisabled, ...props }: SelectableCardRadioProps): import("react/jsx-runtime").JSX.Element;
displayName: string;
};
export { SelectableCardRadio };