{"id":13824434,"url":"https://github.com/vueform/toggle","last_synced_at":"2025-06-17T05:40:49.927Z","repository":{"id":44445241,"uuid":"326946609","full_name":"vueform/toggle","owner":"vueform","description":"Vue 3 toggle component with labels, custom slots and styling options (+Tailwind CSS support).","archived":false,"fork":false,"pushed_at":"2023-10-19T06:33:20.000Z","size":725,"stargazers_count":115,"open_issues_count":5,"forks_count":9,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-19T18:08:24.546Z","etag":null,"topics":["toggle","toggle-button","toggle-buttons","toggle-controls","toggle-switch","toggle-switches","toggler","toggles","vue","vue2","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://vueform.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vueform.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-01-05T09:17:18.000Z","updated_at":"2025-03-14T06:11:23.000Z","dependencies_parsed_at":"2024-01-07T12:56:58.899Z","dependency_job_id":null,"html_url":"https://github.com/vueform/toggle","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/vueform/toggle","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueform%2Ftoggle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueform%2Ftoggle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueform%2Ftoggle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueform%2Ftoggle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vueform","download_url":"https://codeload.github.com/vueform/toggle/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueform%2Ftoggle/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260300510,"owners_count":22988683,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["toggle","toggle-button","toggle-buttons","toggle-controls","toggle-switch","toggle-switches","toggler","toggles","vue","vue2","vue3","vuejs"],"created_at":"2024-08-04T09:01:02.773Z","updated_at":"2025-06-17T05:40:49.903Z","avatar_url":"https://github.com/vueform.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n\n  \u003ca href=\"https://www.npmjs.com/package/@vueform/toggle\" target=\"_blank\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dm/@vueform/toggle?color=%2353ca2f\"\u003e\n  \u003c/a\u003e\n\n  \u003cimg alt=\"CircleCI\" src=\"https://img.shields.io/circleci/build/github/vueform/toggle\"\u003e\n\n  \u003ca href=\"https://codecov.io/gh/vueform/toggle\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/codecov/c/github/vueform/toggle\"/\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.npmjs.com/package/@vueform/toggle\" target=\"_blank\"\u003e\n    \u003cimg alt=\"npm bundle size (scoped version)\" src=\"https://img.shields.io/bundlephobia/minzip/@vueform/toggle?color=53ca2f\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://discord.gg/WhX2nG6GTQ\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Discord\" src=\"https://img.shields.io/discord/787237947635793940\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.npmjs.com/package/@vueform/toggle\" target=\"_blank\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/@vueform/toggle\"\u003e\n  \u003c/a\u003e\n\n  \u003ch1\u003eVue 3 Toggle\u003c/h1\u003e\n  \n  \u003ca href=\"https://vueform.com?cid=toggle\" target=\"_blank\"\u003e\n    \u003cbr\u003e\n    \u003cimg align=\"center\" src=\"https://github.com/vueform/toggle/raw/main/assets/logo.svg\" width=\"110\"\u003e\n    \u003cbr\u003e\n  \u003c/a\u003e\n\n  \u003cbr\u003e\n  \u003cbr\u003e\n\n  \u003ca href=\"https://www.npmjs.com/package/@vueform/toggle\" target=\"_blank\"\u003e\n    \u003cimg align=\"center\" src=\"https://github.com/vueform/toggle/raw/main/assets/screenshot-1.png\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n\n\u003c/div\u003e\n\n## Sponsors\n\n\u003cdiv align=\"center\"\u003e\u003cbr\u003e\n  \u003ca href=\"https://vueform.com?cid=toggle\"\u003e\u003cimg src=\"https://github.com/vueform/toggle/raw/main/assets/logo-horizontal.svg\" width=\"200\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n## About Vueform\n\n\u003ca href=\"https://vueform.com?cid=toggle\"\u003e\n  \u003cimg align=\"center\" src=\"https://github.com/vueform/multiselect/raw/main/assets/vueform-banner.png\" alt=\"Vueform\" title=\"Vueform\"\u003e\n\u003c/a\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\nVueform is comprehensive **form development framework** for Vue.js. It supercharges and standardizes the entire form building process and takes care of everything from rendering to validation and processing. With our latest tool, the **Drag and Drop Form Builder**, you can allow your developers \u0026 non-tech workforce to build the most complex forms without coding.\n\nFeature highlights:\n- integrate Vueform **Drag and Drop Form Builder** into **any application**\n- save forms in **database** as a JSON\n- use your **own form elements** with **custom configuration** options\n- a complete theming and templating system with **Tailwind support**\n- 25+ form elements with **multi-file uploads**, date pickers and rich text editor\n- element **nesting** and **repeating**\n- **50+ validators** with async, dependent and custom rules\n- **conditional logic** on element \u0026 form level\n- breaking forms into **steps** with **form wizard**\n- **translating** form content and global i18n support.\n\n\u003ca href=\"https://builder.vueform.com/demo?cid=toggle\"\u003e\n  \u003cimg align=\"center\" src=\"https://github.com/vueform/multiselect/raw/main/assets/builder-banner.png\" alt=\"Vueform Builder\" title=\"Vueform Builder\"\u003e\n\u003c/a\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n**Learn more:**\n- Builder: [https://builder.vueform.com](https://builder.vueform.com?cid=toggle)\n- Framework: [https://vueform.com](https://vueform.com?cid=toggle)\n\n## Other libraries\n\n* [@vueform/multiselect](https://github.com/vueform/multiselect) - Vue 3 multiselect component with single select, multiselect and tagging options.\n* [@vueform/slider](https://github.com/vueform/slider) - Vue 3 slider component with multihandles, tooltips merging and formatting.\n\n## Toggle features\n\n* Vue 2 \u0026 3 support\n* No dependencies\n* Lightweight (\u003c2 kB gzipped)\n* 100% coverage\n* TypeScript support\n* Accessibility support\n* ESM support\n* CSS vars support\n* Tailwind \u0026 utility class support\n* On / Off labels\n\n## Demo \n\nCheck out our [demo](https://jsfiddle.net/m2hvw7o8/).\n\n## Installation\n\n```\nnpm install @vueform/toggle\n```\n\n## Usage with Vue 3\n\n``` vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cToggle v-model=\"value\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Toggle from '@vueform/toggle'\n\n  export default {\n    components: {\n      Toggle,\n    },\n    data() {\n      return {\n        value: true\n      }\n    }\n  }\n\u003c/script\u003e\n\n\u003cstyle src=\"@vueform/toggle/themes/default.css\"\u003e\u003c/style\u003e\n```\n\n## Using with Vue 2\n\n``` vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cToggle v-model=\"value\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Toggle from '@vueform/toggle/toggle.vue2.js'\n\n  export default {\n    components: {\n      Toggle,\n    },\n    data() {\n      return {\n        value: true\n      }\n    }\n  }\n\u003c/script\u003e\n\n\u003cstyle src=\"@vueform/toggle/themes/default.css\"\u003e\u003c/style\u003e\n```\n\n#### Using with \u003c Vue 2.7\n\nSwitch to [`\u003c= 2.0.2`](https://github.com/vueform/toggle/tree/2.0.2) to use the Toggle with Vue.js `\u003c 2.7`.\n\n## Support\n\nJoin our [Discord channel](https://discord.gg/WhX2nG6GTQ) or [open an issue](https://github.com/vueform/toggle/issues).\n\n## Basic props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| **id** | `string` | `toggle` | The `id` attribute of input field. Make sure to customize when using more toggles on a single page. |\n| **name** | `string` | `toggle` | The `name` attribute of input field. |\n| **disabled** | `boolean` | `false` | Whether the toggle should be disabled. |\n| **required** | `boolean` | `false` | Whether the HTML5 required attribute should be used for toggle (using an invisible fake input). |\n| **falseValue** | `string\\|number\\|boolean` | `false` | The value when the toggle is `off`. |\n| **trueValue** | `string\\|number\\|boolean` | `true` | The value when toggle is `on`. |\n| **offLabel** | `string` | | The label when toggle is `off`. |\n| **onLabel** | `string` | | The label when toggle is `on`. |\n| **aria** | `object` | | An object containing aria attributes to be added for the toggle. |\n| **labelledby** | `string` | | The `aria-labelledby` attribute. |\n| **describedby** | `string` | | The `aria-describedby` attribute. |\n| **classes** | `object` | | An object of class names that gets merged with the default values. Default: `{`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`container: 'toggle-container',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`toggle: 'toggle',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`toggleOn: 'toggle-on',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`toggleOff: 'toggle-off',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`toggleOnDisabled: 'toggle-on-disabled',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`toggleOffDisabled: 'toggle-off-disabled',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`handle: 'toggle-handle',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`handleOn: 'toggle-handle-on',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`handleOff: 'toggle-handle-off',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`handleOnDisabled: 'toggle-handle-on-disabled',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`handleOffDisabled: 'toggle-handle-off-disabled',`\u003cbr\u003e\u0026nbsp;\u0026nbsp;`label: 'toggle-label',`\u003cbr\u003e`}`.\u003cbr\u003e The default value can be used with `default.css` and style can be customized with [CSS variables](#styling-with-css-vars). Alternatively this can be overridden with utility classes like [Tailwind CSS](#styling-with-tailwind-css). |\n\n\u003ca href=\"https://vueform.com?ref=ghb\"\u003e\n  \u003cimg align=\"center\" src=\"https://github.com/vueform/multiselect/raw/main/assets/vueform-banner.png\" alt=\"Vueform\" title=\"Vueform\"\u003e\n\u003c/a\u003e\n\n## Events\n\n| Event | Attributes | Description |\n| --- | --- | --- |\n| **@change** | `value` | Emitted when the toggle changes. |\n\n## Slots\n\n| Slot | Attributes | Description |\n| --- | --- | --- |\n| **label** | `checked`, `classList` | The label of the toggle element. The `checked` attribute determines whether the toggle is *on* or *off* so you can display the label accordingly. The `classList` contains the resolved class names. |\n\n## Styling with CSS vars\n\nThe following CSS variables can be used to customize toggle when using `default.css`:\n``` css\n\n--toggle-width: 3rem;\n--toggle-height: 1.25rem;\n--toggle-border: 0.125rem;\n--toggle-font-size: 0.75rem;\n--toggle-duration: 150ms;\n--toggle-bg-on: #10b981;\n--toggle-bg-off: #e5e7eb;\n--toggle-bg-on-disabled: #d1d5db;\n--toggle-bg-off-disabled: #e5e7eb;\n--toggle-border-on: #10b981;\n--toggle-border-off: #e5e7eb;\n--toggle-border-on-disabled: #d1d5db;\n--toggle-border-off-disabled: #e5e7eb;\n--toggle-ring-width: 3px;\n--toggle-ring-color: #10B98130;\n--toggle-text-on: #ffffff;\n--toggle-text-off: #374151;\n--toggle-text-on-disabled: #9ca3af;\n--toggle-text-off-disabled: #9ca3af;\n--toggle-handle-enabled: #ffffff;\n--toggle-handle-disabled: #f3f4f6;\n```\n\nOverride them globally:\n\n``` css\n:root {\n  --toggle-bg-on: red;\n  --toggle-border-on: red;\n}\n```\n\nOr on an instance level:\n\n``` vue\n\u003cToggle v-model=\"value\" class=\"toggle-red\" /\u003e\n\u003cToggle v-model=\"value\" class=\"toggle-blue\" /\u003e\n```\n\n``` css\n.toggle-red {\n  --toggle-bg-on: red;\n  --toggle-border-on: red;\n}\n\n.toggle-blue {\n  --toggle-bg-on: blue;\n  --toggle-border-on: blue;\n}\n```\n\n## Styling with Tailwind CSS\n\nThe `Toggle` component accepts a `classes` property which allows to override default class names. When using utility classes you don't need to import `default.css`. Here's a default styling for Tailwind CSS:\n\n``` vue\n\u003cToggle v-model=\"value\" :classes=\"{\n  container: 'inline-block rounded-full outline-none focus:ring focus:ring-green-500 focus:ring-opacity-30',\n  toggle: 'flex w-12 h-5 rounded-full relative cursor-pointer transition items-center box-content border-2 text-xs leading-none',\n  toggleOn: 'bg-green-500 border-green-500 justify-start text-white',\n  toggleOff: 'bg-gray-200 border-gray-200 justify-end text-gray-700',\n  toggleOnDisabled: 'bg-gray-300 border-gray-300 justify-start text-gray-400 cursor-not-allowed',\n  toggleOffDisabled: 'bg-gray-200 border-gray-200 justify-end text-gray-400 cursor-not-allowed',\n  handle: 'inline-block bg-white w-5 h-5 top-0 rounded-full absolute transition-all',\n  handleOn: 'left-full transform -translate-x-full',\n  handleOff: 'left-0',\n  handleOnDisabled: 'bg-gray-100 left-full transform -translate-x-full',\n  handleOffDisabled: 'bg-gray-100 left-0',\n  label: 'text-center w-8 border-box whitespace-nowrap select-none',\n}\" /\u003e\n```\n\nCertain classes has different states which are merged to the base class when the state is active. For example `handle` will be merged with `handleOn` when the toggle is **on** and **not disabled** resulting in the following classes:\n```inline-block bg-white w-5 h-5 top-0 rounded-full absolute transition-all left-full transform -translate-x-full```\n\nThe same is true for `toggle`.\n\nIn case you need to override the same type of utility you might use [@neojp/tailwind-important-variant](https://www.npmjs.com/package/@neojp/tailwindcss-important-variant) and use eg. `bg-green-500!`.\n\n## Accessibility\n\nBy default the `on` and `off` labels are being read by the screenreaders. If you provide the `labelledby` property that will be read instead of the labels. You might also add a `describedby` property to provide further description.\n\n``` vue\n\u003cdiv\u003e\n  \u003clabel id=\"toggle-label\"\u003eTurn on notifications\u003c/label\u003e\n  \u003cToggle v-model=\"value\" labelledby=\"toggle-label\" describedby=\"toggle-description\" /\u003e\n\u003c/div\u003e\n\u003csmall id=\"toggle-description\"\u003eTurn this on if you'd like to receive in-app notifications.\u003c/small\u003e\n```\n\n## Examples\n\n* [Default toggle](#default-toggle)\n* [Toggle with labels](#toggle-with-labels)\n* [Toggle with custom values](#toggle-with-custom-values)\n* [Toggle with custom labels](#toggle-with-custom-labels)\n\n### Default toggle\n\n``` vue\n\u003cToggle\n  v-model=\"value\"\n/\u003e\n```\n\n[JSFiddle - Example #1](https://jsfiddle.net/m2hvw7o8/)\n\n### Toggle with labels\n\n``` vue\n\u003cToggle\n  v-model=\"value\"\n  on-label=\"On\"\n  off-label=\"Off\"\n/\u003e\n```\n\n[JSFiddle - Example #2](https://jsfiddle.net/m2hvw7o8/)\n\n### Toggle with custom value\n\n``` vue\n\u003cToggle\n  v-model=\"value\"\n  true-value=\"on\"\n  false-value=\"off\"\n/\u003e\n```\n\n[JSFiddle - Example #3](https://jsfiddle.net/m2hvw7o8/)\n\n### Toggle with custom labels\n\n``` vue\n\u003cToggle\n  v-model=\"value\"\n\u003e\n  \u003ctemplate v-slot:label=\"{ checked, classList }\"\u003e\n    \u003cspan :class=\"classList.label\"\u003e{{ checked ? 'On' : 'Off' }}\u003c/span\u003e\n  \u003c/template\u003e\n\u003c/Toggle\u003e\n```\n\n[JSFiddle - Example #4](https://jsfiddle.net/m2hvw7o8/)\n\n## License\n\n[MIT](https://github.com/vueform/toggle/blob/main/LICENSE.md)","funding_links":[],"categories":["Components \u0026 Libraries","Packages","UI Components [🔝](#readme)"],"sub_categories":["UI Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvueform%2Ftoggle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvueform%2Ftoggle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvueform%2Ftoggle/lists"}