Switch

The Switch component is a customizable toggle input with support for labels, error messages, size variants, and form integration.

import { Switch } from "tawuniya/components";

👉 View in Storybook

---

Props

Prop	Type	Default	Description
label	string	—	Optional label displayed next to the switch.
error	string	—	Error message displayed below the switch.
size	`"sm"	"md"	"lg"`	"md"	Size of the switch toggle.
name	string	—	Name of the input (used with forms).
register	any	—	Integration with React Hook Form.
className	string	—	Additional Tailwind classes for the toggle itself.
wrapperClassName	string	—	Additional Tailwind classes for the wrapper div.
disabled	boolean	—	Disables the switch when true.
checked	boolean	—	Controlled checked state.
onChange	(status: boolean) => void	—	Callback triggered when the switch is toggled.
All other input props	React.InputHTMLAttributes<HTMLInputElement>	—	Native input props supported.

Usage

With Controlled Form

export default function BasicExample() {
  const [enabled, setEnabled] = useState<boolean>(false);

  return (
    <Switch
      label="Enable notifications"
      checked={enabled}
      onChange={setEnabled}
    />
  );
}

With Error Message

<Switch
  label="Enable notifications"
  checked={enabled}
  onChange={setEnabled}
  error="This field is required"
/>

Disabled State

<Switch label="Accept Terms" name="terms" disabled />

With React Hook Form

import { useForm } from "react-hook-form";
import { Switch } from "tawuniya/components";

export default function FormExample() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    defaultValues: { terms: false },
  });

  const onSubmit = (data: any) => console.log(data);

  return <Switch label="Accept Terms" name="terms" register={register} />;
}

Variants

• Size

  • sm → Compact height and text size
  • md → Medium height and text size
  • lg → Large height and text size

Notes

• Works as a controlled component with value + onChange, or with React Hook Form via register prop.
• Supports three sizes: sm, md, lg.