- GitHub: [BonnierNews/dn-design-system/../web/src/components/switch](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/switch)
- Storybook: [Form > Switch](https://designsystem.dn.se/?path=/docs/basic-form-switch--docs)
- Storybook (Latest): [Form > Switch](https://designsystem-latest.dn.se/?path=/docs/basic-form-switch--docs)
----

# Switch

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|name | String | yes | yes | | Also used as id |
|meta | bool | no | true, false | false | Decides if meta text is shown |
|metaOn | String | no | | på | |
|metaOff | String | no | | av | |
|checked | bool | no | true, false | false | |
|disabled | bool | no | true, false | false | |
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|classNames | String | no | | | Ex. "my-special-class" |
|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size |

## Minimum requirement example

### Nunjucks

These are copy paste friendly examples to quickliy get started using a component.

```html
{% from '@bonniernews/dn-design-system-web/components/switch/switch.njk' import Switch %}

{{ Switch({
  meta: true,
  metaOn: "On",
  metaOff: "Off",
  name: "my_switch"
})}}
```

### SCSS
```scss
@use "@bonniernews/dn-design-system-web/components/switch/switch";
```