## Switch Switch is used for switching between two opposing states. ### Basic usage :::demo Bind `v-model` to a `Boolean` typed variable. You can add `on-text` or `off-text` attribute to show texts when the component is `on` or `off`, respectively. The `on-color` and `off-color` attribute decides the background color in two states. ```html ``` ::: ### Extended value types :::demo You can set `on-value` and `off-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value. ```html ``` ::: ### Disabled :::demo Adding the `disabled` attribute disables Switch. ```html ``` ::: ### Attributes Attribute | Description | Type | Accepted Values | Default ----| ----| ----| ----|---- disabled | whether Switch is disabled | boolean | — | false width | width of Switch | number | — | 58 (with text) / 46 (no text) on-close-icon | class name of the icon displayed when in `on` state, overrides `on-text` | string | — | — off-close-icon |class name of the icon displayed when in `off` state, overrides `off-text`| string | — | — on-text | text displayed when in `on` state | string | — | ON off-text | text displayed when in `off` state | string | — | OFF on-value | switch value when in `on` state | boolean / string / number | — | true off-value | switch value when in `off` state | boolean / string / number | — | false on-color | background color when in `on` state | string | — | #20A0FF off-color | background color when in `off` state | string | — | #C0CCDA name| input name of Switch | string | — | — ### Events Event Name | Description | Parameters ---- | ----| ---- change | triggers when value changes | value after changing