react-animated-ui/docs/DesignToggleSwitch.md

A React UI library featuring animated components including buttons, forms, dropdowns, date pickers, and more.

# Design Toggle Switch

## Description  
A stylish toggle switch component with smooth sliding animations. Use it to enable or disable options in your UI with an engaging animation.

---

## Props

| Prop       | Type                               | Default | Description                         |
|------------|----------------------------------|---------|-----------------------------------|
| `checked`  | `boolean`                        | `false` | Whether the toggle is ON or OFF    |
| `onChange` | `(checked: boolean) => void`    | `-`     | Callback when toggle state changes |
| `disabled` | `boolean`                       | `false` | Disables the toggle when true      |
| `className`| `string`                        | `""`    | Custom CSS class for styling       |

---

## Usage

```tsx
import { ToggleSwitch } from 'react-animated-ui';

function MyComponent() {
  const [isToggled, setIsToggled] = React.useState(false);

  return (
    <ToggleSwitch 
      checked={isToggled} 
      onChange={setIsToggled} 
    />
  );
}



## example 
import { ToggleSwitch } from 'react-animated-ui';

<ToggleSwitch 
  checked={true} 
  onChange={(checked) => console.log('Toggled:', checked)} 
  className="my-custom-toggle"
/>
<label>Enable feature</label>