# Switch

A toggle switch for user interactions like turning settings on or off.

## Props

| Prop          | Type          | Description                                                                                                                               | Default |
| ---------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| name             | string        | Name of the switch.                                                                                                                        |         |
| id               | string        | Id of the switch.                                                                                                                          |         |
| colorScheme      | string        | Defines the color theme for the switch component.                                                                                             |         |
| shadow           | Shadow        | Defines the shadow appearance of the switch using predefined Shadow or Elevation, or a custom CSSProperties object.                        |         |
| styles           | CSSProperties | Optional custom styles for the switch component.                                                                                              |         |
| className        | string        | Optional className for the switch component.                                                                                                |         |
| isChecked        | boolean       | Defines the initial toggle state.                                                                                                          | false   |
| isDisabled       | boolean       | Sets the toggle component as disabled or not.                                                                                              | false   |

### **Import**
  ```tsx
  import { Switch } from '@app-studio/web';
  ```

### **Default**
```tsx
import React from 'react';
import { Switch } from '@app-studio/web';

export const DefaultSwitch = () => <Switch id="check" name="checkbox" />;

```

### **colorScheme**
Defines the color theme for the switch component.

```tsx
import React from 'react';

import { Switch } from '@app-studio/web';

export const ColorSwitch = () => (
  <Switch name="name" colorScheme="theme-primary" isChecked />
);

```

### **shadow**
Defines the shadow appearance of the switch using predefined Shadow or Elevation, or a custom CSSProperties object.

```tsx
import React from 'react';
import { Switch } from '@app-studio/web';

export const ShadowSwitch = () => (
  <Switch
    id="shadowCheckbox"
    name="shadowCheckbox"
    shadow={{ boxShadow: 'rgb(249, 115, 22) 0px 4px 14px 0px' }}
    isChecked
  />
);

```