Switch NEW
Behaves same as checkbox but UI is like a switch.
Subscribed
Unsubscribed
Light
Dark
Color
Array Value
[ "react" ]
Vue
Vue
React
React
Angular
Angular
Svelte
Svelte
On / Off / Circle Slots
You can define specific values for on and off states using named on and off slots. default slot is used on both on and off if either of them is not specified.
cirlce slot allows setting content for example an icon on mover.
Default Slot
Default Slot
Default Slot
On/Off Slots
Light
Dark
Circle Slot
Alternative
Alternative prop changes b1 and b2 color ( background 1 and backround 2 ).
autoWidth
By default when on and off slots are not same width you can experience a transition on width, if it shows any unexpected behaviour you can set the width to auto by autoWidth boolean prop.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| modelValue | boolean | string | number | null | Record<string, any> | Yes | undefined | Value of the active radio. |
| value | string, number | No | undefined | Used when v-model is array |
| color | string | No | undefined | The primary color of the component. |
| containerClass | string | No | undefined | Class(es) to be passed to content container |
| disabled | boolean | No | undefined | If true, disables the input element. |
| alternative | boolean | No | undefined | Reverts b1 and b2 colors. |
| autoWidth | boolean | No | undefined | Disabled width transition. |
Slots
| Name | slot props | description |
|---|---|---|
| default | - | On and Off |
| on | - | Visible when switch is active |
| off | - | Visible when switch is deactive |
| circle | - | content of mover |