@payfit/unity-components
Version:
72 lines (71 loc) • 3.2 kB
TypeScript
import { VariantProps } from '@payfit/unity-themes';
import { ReactNode } from 'react';
export declare const toggleSwitchGroup: 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 ToggleSwitchGroupProps extends VariantProps<typeof toggleSwitchGroup> {
/** The label for the group. */
label: string;
/** Helper text to display below the group. */
helperText?: ReactNode;
/** Feedback text to display below the group. */
feedbackText?: ReactNode;
/** The default selected values of the group. */
defaultValue?: string[];
/** The current selected values of the group (controlled). */
value?: string[];
/** Whether the group is disabled. */
isDisabled?: boolean;
/** Whether the group is read-only. */
isReadOnly?: boolean;
/** Whether the group is invalid. */
isInvalid?: boolean;
/** Whether the group is required. */
isRequired?: boolean;
/** The variant of the required indicator. */
requiredVariant?: 'required' | 'optional';
/** Callback when the selection changes. */
onChange?: (value: string[]) => void;
/**
* Handler called when the group receives focus.
*/
onFocus?: (e: React.FocusEvent<HTMLFieldSetElement>) => void;
/**
* Handler called when the group loses focus.
*/
onBlur?: (e: React.FocusEvent<HTMLFieldSetElement>) => void;
/**
* Handler that is called when the element's focus status changes.
* @param isFocused
*/
onFocusChange?: (isFocused: boolean) => void;
children: ReactNode;
}
/**
* The `ToggleSwitchGroup` component manages a collection of related toggle switches as a single unit.
* It provides a way to select multiple options from a list of choices, with proper form field semantics
* and accessibility features.
*
* The component handles the selection state internally and can be used in both controlled and uncontrolled modes.
* It's particularly useful for settings pages, preference forms, or any scenario requiring multiple binary choices.
* @param {ToggleSwitchGroupProps} props - Props for the ToggleSwitchGroup component
* @example
* ```tsx
* import { ToggleSwitchGroup, ToggleSwitch } from '@payfit/unity-components'
*
* function Example() {
* return (
* <ToggleSwitchGroup
* label="Notification preferences"
* helperText="Choose how you want to receive notifications"
* >
* <ToggleSwitch value="email" label="Email notifications" />
* <ToggleSwitch value="sms" label="SMS notifications" />
* <ToggleSwitch value="push" label="Push notifications" />
* </ToggleSwitchGroup>
* )
* }
* ```
* @see {@link ToggleSwitchGroupProps} for all available props
* @remarks
* [API](/?path=/docs/forms-toggleswitchgroup--docs) • [Demo](/?path=/story/forms-toggleswitchgroup--primary)
*/
export declare const ToggleSwitchGroup: import('react').ForwardRefExoticComponent<ToggleSwitchGroupProps & import('react').RefAttributes<HTMLFieldSetElement>>;