UNPKG

@payfit/unity-components

Version:

47 lines (46 loc) 1.83 kB
import { ToggleSwitch } from './ToggleSwitch.js'; type BaseToggleSwitchProps = React.ComponentProps<typeof ToggleSwitch>; export type TanstackToggleSwitchProps = Omit<BaseToggleSwitchProps, 'isSelected' | 'defaultSelected'>; /** * TanStack‑controlled toggle switch. * * `TanstackToggleSwitch` is the Unity `ToggleSwitch` wired to the TanStack Form * field context. Its selected state (`isSelected`) is fully controlled by the * form and updates through `field.handleChange` on user interaction. * * Accessibility: * - Automatically links to the enclosing `TanstackFormField` feedback text via * `aria-describedby`. * - Use a plain string `label` (or `isLabelSrOnly` for visually hidden labels) * to keep the control accessible. * * Usage: * - Must be rendered inside `<form.AppField name="…">` from * `useTanstackUnityForm`. * - Do not pass `isSelected`/`defaultSelected`; use form default values instead. * @example * ```tsx * import { useTanstackUnityForm } from '@/hooks/use-tanstack-form' * import { TanstackToggleSwitch } from '@/components/toggle-switch/TanstackToggleSwitch' * import * as z from 'zod' * * const schema = z.object({ newsletter: z.boolean().optional() }) * * export function Example() { * const form = useTanstackUnityForm({ validators: { onBlur: schema } }) * return ( * <form.AppForm> * <form.Form> * <form.AppField name="newsletter"> * {() => ( * <TanstackToggleSwitch label="Subscribe to newsletter" /> * )} * </form.AppField> * </form.Form> * </form.AppForm> * ) * } * ``` */ declare const TanstackToggleSwitch: import('react').ForwardRefExoticComponent<Omit<TanstackToggleSwitchProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>; export { TanstackToggleSwitch };