@payfit/unity-components
Version:
66 lines (65 loc) • 2.91 kB
TypeScript
import { VariantProps } from '@payfit/unity-themes';
import { ReactNode } from 'react';
import { CheckboxGroupProps as AriaCheckboxGroupProps } from 'react-aria-components/CheckboxGroup';
export declare const checkboxGroup: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:flex uy:flex-col uy:gap-50", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:flex uy:flex-col uy:gap-50", unknown, unknown, undefined>>;
export interface CheckboxGroupProps extends VariantProps<typeof checkboxGroup>, Omit<AriaCheckboxGroupProps, 'className' | 'class'> {
/** The label for the checkbox group. */
label: string;
/** Helper text to display below the checkbox group. */
helperText?: ReactNode;
/** Feedback text to display below the checkbox group. */
feedbackText?: ReactNode;
/** The default selected values of the checkbox group. */
defaultValue?: string[];
/** The current selected values of the checkbox group (controlled). */
value?: string[];
/** Whether the checkbox group is disabled. */
isDisabled?: boolean;
/** Whether the checkbox group is read-only. */
isReadOnly?: boolean;
/** Whether the checkbox group is invalid. */
isInvalid?: boolean;
/** Whether the checkbox group is required. */
isRequired?: boolean;
/** Whether the checkbox group is loading. */
isLoading?: boolean;
/** The variant of the required indicator. */
requiredVariant?: 'required' | 'optional';
/** Callback when the selection changes. */
onChange?: (value: string[]) => void;
/**
* Handler called when the checkbox receives focus.
*/
onFocus?: AriaCheckboxGroupProps['onFocus'];
/**
* Handler called when the checkbox loses focus.
*/
onBlur?: AriaCheckboxGroupProps['onBlur'];
/**
* Handler that is called when the element's focus status changes.
* @param isFocused
*/
onFocusChange?: (isFocused: boolean) => void;
children: ReactNode;
}
/**
* The `CheckboxGroup` component is an accessible group of related checkboxes.
* It provides a way to select multiple options from a list of choices.
* @param {CheckboxGroupProps} props - The props for the `CheckboxGroup` component
* @example
* ```tsx
* import { CheckboxGroup, Checkbox } from '@payfit/unity-components'
*
* <CheckboxGroup
* label="Notification preferences"
* helperText="Choose how you want to receive notifications"
* >
* <Checkbox value="email">Email notifications</Checkbox>
* <Checkbox value="sms">SMS notifications</Checkbox>
* <Checkbox value="push">Push notifications</Checkbox>
* </CheckboxGroup>
* ```
* @see {@link CheckboxProps} for all available props
*/
declare const CheckboxGroup: import('react').ForwardRefExoticComponent<CheckboxGroupProps & import('react').RefAttributes<HTMLDivElement>>;
export { CheckboxGroup };