## Switch Switch is used for switching between two opposing states. ### Basic usage :::demo Bind `v-model` to a `Boolean` typed variable. The `true-color` and `false-color` attribute decides the background color in two states. ```html ``` ::: ### Text description :::demo You can add `true-text` and `false-text` attribute to show texts. ```html ``` ::: ### Extended value types :::demo You can set `true-value` and `false-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 | — | 40 true-icon-class | class name of the icon displayed when in `on` state, overrides `true-text` | string | — | — false-icon-class |class name of the icon displayed when in `off` state, overrides `false-text`| string | — | — true-text | text displayed when in `on` state | string | — | — false-text | text displayed when in `off` state | string | — | — true-value | switch value when in `on` state | boolean / string / number | — | true false-value | switch value when in `off` state | boolean / string / number | — | false true-color | background color when in `on` state | string | — | #409EFF false-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 ### Methods Method | Description | Parameters ------|--------|------- focus | focus the Switch component | —