Toggle

A customizable toggle switch component that provides a modern neumorphic design. It supports various sizes, custom icons, and can be used for binary state selection.

Basic Usage

import { Toggle } from "@carton-org/react-neumorphism";
import { useState } from "react";

const MyComponent = () => {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <Toggle
      label="Enable notifications"
      checked={isChecked}
      onChange={(e) => setIsChecked(e.target.checked)}
    />
  );
};

Live Example

Enable notifications

Props

Name	Type	Description	Required	Default Value
id	string	Unique identifier for the toggle input	No	undefined
label	string	Text label displayed next to the toggle	No	undefined
size	"xs" | "sm" | "md" | "lg" | "xl"	Size of the toggle switch	No	"md"
rounded	boolean	Whether the toggle should have rounded corners	No	false
border	boolean	Whether to show a border around the toggle	No	false
checked	boolean	Whether the toggle is checked	No	false
disabled	boolean	Whether the toggle is disabled	No	false
icons	{ checkedIcon: React.ReactNode; uncheckedIcon: React.ReactNode }	Custom icons for checked and unchecked states	No	undefined
onChange	(event: React.ChangeEvent<HTMLInputElement>) => void	Callback fired when the toggle state changes	No	undefined
labelStyle	React.CSSProperties	Custom styles for the label element	No	undefined
toggleStyle	React.CSSProperties	Custom styles for the toggle switch element	No	undefined

Examples

Different Sizes

Extra Small

Small

Medium

Large

Extra Large

With Custom Icons

Dark Mode

☀️

Rounded Toggle

Rounded Toggle

With Border

Bordered Toggle

Disabled State

Disabled Unchecked

Disabled Checked

Toggle Disabled State