{
  "title": "Form Switch",
  "description": "A switch input field with on/off state and validation.",
  "name": "form-switch",
  "dependencies": [
    "@tanstack/react-form"
  ],
  "registryDependencies": [
    "field",
    "switch"
  ],
  "type": "registry:component",
  "files": [
    {
      "path": "components/ui/forms/form-switch.tsx",
      "type": "registry:component",
      "content": "import { type AnyFormApi, type DeepKeys, useField } from \"@tanstack/react-form\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Field, FieldLabel } from \"@/components/ui/field\";\nimport { FormError } from \"@/components/ui/forms/form-error\";\nimport { type GetFormData } from \"@/components/ui/forms/helpers\";\nimport { Switch } from \"@/components/ui/switch\";\n\nexport type FormSwitchProps<TForm extends AnyFormApi> = Omit<ComponentProps<typeof Switch>, \"name\" | \"form\"> & {\n    label?: ReactNode;\n    form: TForm;\n    name: DeepKeys<GetFormData<TForm>>;\n    containerClassName?: string;\n};\n\nexport const FormSwitch = <TForm extends AnyFormApi>({\n    label,\n    form,\n    name,\n    className,\n    containerClassName,\n    ...rest\n}: FormSwitchProps<TForm>) => {\n    const field = useField({\n        form,\n        name,\n    });\n\n    const errors = field.state.meta.errors[0];\n    const error = typeof errors === \"object\" ? errors.message : errors;\n\n    return (\n        <Field data-invalid={error != undefined} className={cn(\"w-fit gap-1.5\", containerClassName)}>\n            <div className=\"flex cursor-pointer items-center gap-3\">\n                <Switch\n                    id={field.name}\n                    name={field.name}\n                    checked={field.state.value as boolean}\n                    onCheckedChange={field.handleChange}\n                    onBlur={field.handleBlur}\n                    aria-invalid={error != undefined}\n                    className={className}\n                    {...rest}\n                />\n                {label && (\n                    <FieldLabel className=\"cursor-pointer\" htmlFor={field.name}>\n                        {label}\n                    </FieldLabel>\n                )}\n            </div>\n            <FormError form={form} name={name} />\n        </Field>\n    );\n};\n"
    },
    {
      "path": "components/ui/forms/form-error.tsx",
      "type": "registry:ui",
      "content": "import { type AnyFormApi, type DeepKeys, useField } from \"@tanstack/react-form\";\nimport type { InputHTMLAttributes } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { type GetFormData } from \"@/components/ui/forms/helpers\";\n\nexport type FormErrorProps<TForm extends AnyFormApi> = Omit<\n    InputHTMLAttributes<HTMLParagraphElement>,\n    \"name\" | \"form\"\n> & {\n    form: TForm;\n    name: DeepKeys<GetFormData<TForm>>;\n};\n\nexport const FormError = <TForm extends AnyFormApi>({ form, name = \"\", className, ...rest }: FormErrorProps<TForm>) => {\n    const field = useField({\n        form,\n        name,\n    });\n\n    const errors = field.state.meta.errors[0];\n    const error = typeof errors === \"object\" ? errors.message : errors;\n\n    return (\n        <>\n            {error && (\n                <p {...rest} className={cn(\"text-destructive text-sm\", className)}>\n                    {error}\n                </p>\n            )}\n        </>\n    );\n};\n"
    },
    {
      "path": "components/ui/forms/helpers.ts",
      "type": "registry:ui",
      "content": "import { type AnyFormApi, type DeepKeys, type FormApi } from \"@tanstack/react-form\";\n\nexport type GetFormData<TForm> =\n    TForm extends FormApi<infer TData, any, any, any, any, any, any, any, any, any, any, any> ? TData : never;\n\nexport const setFieldError = <TForm extends AnyFormApi>(\n    form: TForm,\n    field: DeepKeys<GetFormData<TForm>>,\n    error: string,\n) => {\n    form.setFieldMeta(field, (prev) => ({\n        ...prev,\n        errorMap: {\n            ...prev.errorMap,\n            onSubmit: error,\n        },\n    }));\n};\n\nexport const clearFormErrors = <TForm extends AnyFormApi>(form: TForm) => {\n    form.setErrorMap({ onDynamic: { fields: {} } });\n};\n"
    }
  ],
  "mcp": {
    "description": "Provides refined UI interactions and accessible controls. A switch input field with on/off state and validation. Relies on @tanstack/react-form, field, switch. Optimal for building reusable interface elements and user input flows.",
    "tags": [
      "component",
      "form"
    ]
  }
}