import { Meta, ArgTypes, Canvas } from "@storybook/addon-docs/blocks";
import * as SwitchStories from "./Switch.stories";
import { Switch } from "./Switch";

<Meta of={SwitchStories} />

# Switch

The `Switch` component is used for toggling between two states, such as on and off.

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { Switch } from "@simplybusiness/mobius";
```

### Default

<Canvas of={SwitchStories.Default} />

## Props

<ArgTypes of={Switch} />

## Component HTML Structure and Class names

The following HTML is rendered for a Switch:

```html
<label class="mobius-switch">
  <input type="checkbox" role="switch" />
  <span class="mobius-switch__slider"></span>
</label>
```
