# Toggle

A versatile control allowing users to switch between two states, enabling or disabling features.

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

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

export const DefaultDemo = () => {
  return <Toggle>Default</Toggle>;
};
```

### **shape**
Optional 'shape' property to determine the shape of the toggle component.

- **Type:** `string`
- **Default:** `rounded`
- **Possible Values:** `sharp, rounded, pillShaped`

```tsx
import React from 'react';
import { Horizontal } from 'app-studio';
import { Toggle } from '@app-studio/web';
import { Shape } from '@app-studio/web';
import { View } from 'app-studio';
export const ShapeDemo = () => (
  <Horizontal gap={15}>
    {['sharp', 'rounded', 'pillShaped'].map((border, index) => (
      <View position="relative" key={index}>
        <Toggle shape={border as Shape}>{border}</Toggle>
      </View>
    ))}
  </Horizontal>
);
```

### **isToggled**
Optional boolean to define the initial toggle state.

- **Type:** `boolean`
- **Default:** `undefined`
- **Possible Values:** `true, false`

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

export const IsToggledDemo = () => {
  return (
    <Toggle isToggled={true} isDisabled>
      IsActive
    </Toggle>
  );
};
```

### **isDisabled**
Optional boolean to set the toggle component as disabled or not.

- **Type:** `boolean`
- **Default:** `undefined`
- **Possible Values:** `true, false`

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

export const IsDisabledDemo = () => {
  return <Toggle isDisabled>IsDisabled</Toggle>;
};
```

### **variant**
Optional 'variant' to style the toggle component with predefined sets of visual types.

- **Type:** `string`
- **Default:** `ghost`
- **Possible Values:** `outline, link, ghost`

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

export const VariantDemo = () => (
  <Vertical gap={15}>
    {['outline', 'link', 'ghost'].map((variant, index) => (
      <Toggle key={index} variant={variant as Variant}>
        {variant}
      </Toggle>
    ))}
  </Vertical>
);
```

### **onToggle**
Optional function that triggers when the toggle state changes, receives the new state as an argument.

- **Type:** `(isToggled: boolean) => void`
- **Default:** `undefined`
- **Possible Values:** `N/A`

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

export const OnToggleDemo = () => {
  const [isToggle, setIsToggled] = useState(false);
  return (
    <Toggle
      onToggle={(state) => {
        setIsToggled(state);
      }}
    >
      {isToggle ? 'On' : 'Off'}
    </Toggle>
  );
};
```