Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/juliandreas/vue-toggles

A highly customizable and accessible toggle component for Vue
https://github.com/juliandreas/vue-toggles

vue vue3 vuejs

Last synced: about 2 months ago
JSON representation

A highly customizable and accessible toggle component for Vue

Lists

README 

        
Vue Toggles




A highly customizable and accessible toggle component for Vue 3.






  






Vue Toggles Logo




## Introduction



Vue Toggles comes out of the box with accessibility support for:



- `aria-checked` depending on state

- `aria-readonly` if the toggle is disabled

- `prefers-reduced-motion` if the user has requested any type of motion reduction [[prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)]



### Accessibility



What's left for you, when it comes to accessibility, is labeling the toggle correctly. This is either done by:



- A `Toggle description` followed by the toggle component ``

- Or an `aria-label`, for example ``. Remember, you still need a visual text description of what the toggle does



The `focus`-style is also left up to you — which you shouldn't remove. If you think the default is ugly, style it yourself!



## Installation



```

npm i vue-toggles

```



### Import component



```javascript

import { VueToggles } from "vue-toggles";

```



### Import types



```javascript

import { type VueTogglesProps } from "vue-toggles";

```



## Usage



The toggle is very easy to use out of the box. The bare minimum for it to work is a `@click`-function and a `:value`-prop.



```html



```



Or if you prefer the `v-model`-syntax:



```html



```



## Options



You can also add more props to customize things like color and width/height.



```html



```



## Properties



| Name               | Type             | Default   | Description                                       |

| ------------------ | ---------------- | --------- | ------------------------------------------------- |

| value              | Boolean          | `false`   | Initial state of the toggle button                |

| disabled           | Boolean          | `false`   | Toggle does not react on mouse or keyboard events |

| reverse            | Boolean          | `false`   | Reverse toggle to Right to Left                   |

| height             | [String, Number] | `25`      | Height of the toggle in `px`                      |

| width              | [String, Number] | `75`      | Width of the toggle in `px`                       |

| dotColor           | String           | `#ffffff` | Color of the toggle dot                           |

| uncheckedBg        | String           | `#939393` | Background color when the toggle is unchecked     |

| checkedBg          | String           | `#5850ec` | Background color when the toggle is checked       |

| uncheckedTextColor | String           | `#ffffff` | Text color when the toggle is unchecked           |

| checkedTextColor   | String           | `#ffffff` | Text color when the toggle is checked             |

| uncheckedText      | String           | `""`      | Optional text when the toggle is unchecked        |

| checkedText        | String           | `""`      | Optional text when the toggle is checked          |

| fontSize           | String           | `12`      | Font size in `px`                                 |

| fontWeight         | String           | `normal`  | Font weight                                       |



## Vue 2 support



If you're looking for Vue 2 support, the `1.1.4`version is available [here](https://www.npmjs.com/package/vue-toggles/v/1.1.4).



## License



[MIT](http://opensource.org/licenses/MIT)