switch-form-field.tsx

Overview

switch-form-field.tsx defines a reusable React functional component, SwitchFormField, that integrates a toggle switch UI element into a form managed by react-hook-form. This component provides a labeled switch input with optional vertical layout and tooltip support, designed for consistent form styling and accessibility using the project's UI primitives.

The file’s primary purpose is to encapsulate the logic and rendering of a form switch field, simplifying form building by handling connection to form state, layout, and UI composition in one place.

Component: SwitchFormField

Description

SwitchFormField is a React component that renders a labeled switch input integrated with react-hook-form. It uses the following UI components from the project:

• FormField, FormControl, FormItem, and FormLabel — for standardized form layout and accessibility.

• Switch — a toggle switch UI element.

• cn — a utility for conditional className concatenation.

The component supports vertical or horizontal layout and can display a tooltip on the label.

Props

Internal Behavior and Implementation Details

• Uses the useFormContext hook from react-hook-form to access the form control and field state without passing props explicitly.

• Wraps the switch input in FormField and FormControl components to maintain consistent form control styling and accessibility.

• The layout is controlled by conditional CSS classes applied via the cn utility:

  • If vertical is true (default), the container has flex, flex-col, and gap-2 classes for vertical stacking with spacing.

  • If vertical is false, it switches to a horizontal layout with flex and justify-between.

• The switch's checked state and change handler are bound to the form field's value and onChange respectively.

• The switch has aria-readonly to indicate accessibility state and a margin override class to remove default margins.

Usage Example

import { useForm, FormProvider } from 'react-hook-form';
import { SwitchFormField } from './switch-form-field';

function MyForm() {
  const methods = useForm({
    defaultValues: {
      notifications: false,
    },
  });

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(data => console.log(data))}>
        <SwitchFormField
          name="notifications"
          label="Enable Notifications"
          tooltip="Toggle to receive email notifications"
          vertical={false}
        />
        <button type="submit">Submit</button>
      </form>
    </FormProvider>
  );
}

Interaction with Other Parts of the System

• react-hook-form: Integrates tightly by utilizing useFormContext to get the form methods and field state, enabling validation, state management, and submission handling.

• UI Library Components (@/components/ui/form and @/components/ui/switch): Relies on these for consistent styling and behavior across the application’s forms.

• Utility cn Function (@/lib/utils): Used for conditional CSS class composition, ensuring flexible layout based on props.

This component is designed to be used within a form that is wrapped by react-hook-form's FormProvider or equivalent context provider to work correctly.

Mermaid Component Diagram

componentDiagram
    component SwitchFormField {
        +name: string
        +label: ReactNode
        +vertical?: boolean
        +tooltip?: ReactNode
        render()
    }
    component FormField
    component FormItem
    component FormLabel
    component FormControl
    component Switch
    component useFormContext

    SwitchFormField --> useFormContext : use hook to get form control
    SwitchFormField --> FormField : wraps switch with form control
    SwitchFormField --> FormItem : layout container
    SwitchFormField --> FormLabel : displays label and tooltip
    SwitchFormField --> FormControl : wraps switch for styling
    SwitchFormField --> Switch : toggle input component

Summary

The switch-form-field.tsx file encapsulates a form switch component that:

• Binds a toggle switch UI element to react-hook-form state and handlers.

• Provides flexible layout (vertical/horizontal) and optional tooltips.

• Uses project-specific UI primitives for consistent styling and accessibility.

• Simplifies form construction by abstracting away common switch field logic.

This component is essential for building forms with toggle switches that seamlessly integrate into the app's form handling architecture.