Switch Component

The Switch component is a React-based toggle switch, customizable and integrated with react-hook-form for form handling. It's ideal for toggling between two states, such as on/off or yes/no scenarios.

Features

• Integrates with react-hook-form for seamless form management.
• Customizable with optional CSS classes.
• Visually indicates the current state with a sliding toggle.
• Supports additional props for extended functionality.

Props

Prop	Type	Description
name	Path<TFieldValues>	Name of the input field for form handling.
register	UseFormRegister<TFieldValues>	Function from react-hook-form to register the component.
className	string (optional)	Additional CSS classes for custom styling.
checked	boolean	Determines the initial state of the switch.

Additional props can be passed for more specific use cases.

Component

import React, { useRef } from "react";
import classNames from "classnames";
import { FieldValues, Path, UseFormRegister } from "react-hook-form";
import "tailwindcss/tailwind.css";

interface SwitchProps<TFieldValues extends FieldValues> {
  name: Path<TFieldValues>;
  register: UseFormRegister<TFieldValues>;
  className?: string;
  checked: boolean;
}

const Switch = <TFormValues extends FieldValues>({
  name,
  register,
  className,
  checked,
  ...props
}: SwitchProps<TFormValues>) => {
  const ref = useRef<HTMLInputElement>(null);
  const switchClass = classNames(
    "relative inline-block w-10 mr-2 align-middle select-none",
    className
  );
  const toggleClass = classNames(
    "block w-6 h-6 bg-white rounded-full  border-4 shadow transform transition duration-200 ease-in-out",
    { "translate-x-4 bg-blue-300": checked, "translate-x-0": !checked }
  );

  return (
    <div className={switchClass}>
      <input
        id={name}
        type="checkbox"
        {...register(name)}
        className="toggle-checkbox z-99 absolute block w-6 h-6 rounded-full appearance-none cursor-pointer"
      />
      <label
        htmlFor={name}
        className={classNames(
          "toggle-label block overflow-hidden h-6 rounded-full cursor-pointer transition duration-200 ease-in",
          { "bg-blue-400": checked, "bg-green-300": !checked }
        )}
      >
        <span className={toggleClass}></span>
      </label>
    </div>
  );
};

export default Switch;

Usage

This component is useful in forms where a user needs to make a binary choice, like enabling/disabling a setting or agreeing/disagreeing to terms.

Styling

Styled using Tailwind CSS, it's customizable to match the design requirements of your application. The className prop allows for additional styling.

Accessibility

This component is built with basic accessibility features, like keyboard navigability and focus management. Additional accessibility enhancements can be implemented based on specific use cases.

Dependencies

• React ^17.0.0 or higher
• react-hook-form ^7.0.0 or higher
• Tailwind CSS for styling

Notes

• Ensure the name prop corresponds with the field's name in your form.
• The checked prop sets the initial state but can also be managed via form state for dynamic behavior.

---

This documentation provides a comprehensive overview of the Switch component, detailing its features, props, styling, and dependencies. Customize it according to your project's configuration.