{"id":13453105,"url":"https://github.com/fntneves/jquery-labelauty","last_synced_at":"2025-10-22T16:02:28.163Z","repository":{"id":10368023,"uuid":"12510317","full_name":"fntneves/jquery-labelauty","owner":"fntneves","description":"A lightweight and beautiful jQuery plugin for radio and checkbox inputs.","archived":true,"fork":false,"pushed_at":"2017-10-11T00:25:35.000Z","size":133,"stargazers_count":884,"open_issues_count":7,"forks_count":115,"subscribers_count":38,"default_branch":"master","last_synced_at":"2025-03-01T02:48:51.235Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://labelauty.js.org","language":"CSS","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/fntneves.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-08-31T19:13:41.000Z","updated_at":"2024-10-14T16:25:37.000Z","dependencies_parsed_at":"2022-08-29T07:20:38.925Z","dependency_job_id":null,"html_url":"https://github.com/fntneves/jquery-labelauty","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fntneves%2Fjquery-labelauty","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fntneves%2Fjquery-labelauty/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fntneves%2Fjquery-labelauty/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fntneves%2Fjquery-labelauty/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fntneves","download_url":"https://codeload.github.com/fntneves/jquery-labelauty/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245194198,"owners_count":20575723,"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":[],"created_at":"2024-07-31T08:00:33.023Z","updated_at":"2025-10-22T16:02:27.847Z","avatar_url":"https://github.com/fntneves.png","language":"CSS","funding_links":[],"categories":["CSS","Animation"],"sub_categories":["Forms"],"readme":"\u003e# **This repository is no longer mantained.**\n\u003e\n\u003e I recommend you to use reactive and modern JavaScript frameworks, such as VueJS and React.\n\nLabelauty jQuery Plugin\n=========\n\nA nice and lightweight jQuery plugin that gives beauty to checkboxes and\nradio buttons and allows custom labels for each status of (un)checked inputs.\n\n**Demo:** http://fntneves.github.io/jquery-labelauty\n\n__Note:__ Labelauty does not support Internet Explorer 7 and 8.\n\nInstallation\n------------\n\nInstall with Bower :\n\n~~~\nbower install labelauty --save\n~~~\n\nInstall with NPM :\n\n~~~\nnpm install labelauty --save\n~~~\n\nInstall with Yarn :\n\n~~~\nyarn add labelauty\n~~~\n\n\nFast Usage\n-----------\n\nWrite your checkbox or radio input in `body` section and call `labelauty()` to beautify it.\nNote: Call plugin when document is ready. See below:\n\n~~~ html\n\u003cinput type=\"checkbox\"/\u003e\n~~~\n\n~~~ js\n$(document).ready(function(){\n\t$(\":checkbox\").labelauty();\n});\n~~~\n\nSimple, isn't it?\n\nAria Uses\n----------\nTo add a Aria attributes, just add a aria-label. Labelauty will add tabindex, role and checked attributes.\n\n~~~ html\n\u003cinput aria-label=\"This branch is awesome\" type=\"checkbox\"/\u003e\n~~~\n\nUse Cases\n----------\n\n * If you want to create user-friendly websites, this is the right choice!\n\n * Very useful in `remember me` checkboxes, in `settings panel`, etc.\n\n\nHow does it work ?\n--------------\n\nThe above case will generate one checkbox with default\nlabels \"Checked\" and \"Unchecked\", one for each input state.\n\nYou can change the default labels (see [Options] section) or\ngive custom labels to each checkbox, like the following example:\n\n~~~ html\n\u003cinput type=\"checkbox\" data-labelauty=\"Don't synchronize files|Synchronize my files\"/\u003e\n~~~\n\n~~~ js\n$(document).ready(function(){\n\t$(\":checkbox\").labelauty();\n});\n~~~\n\nThe __data-labelauty__ attribute of radio and checkbox inputs lets you write custom labels for __unchecked|checked__ cases.\nPipe character __|__, is the default separator between these two labels. You can change it (see [Options] section).\n\n\n\n\nThe __data-labelauty__ attribute can be used in three different ways:\n__________\n__Unchecked|Checked__\n\nTo choose a custom label for Unchecked and Checked states.\n\n~~~ html\n\u003cinput type=\"checkbox\" data-labelauty=\"Don't synchronize files|Synchronize my files\"/\u003e\n~~~\n__________\n__Message__\n\nWithout separator, the __Message__ text will be the permanent label. It means that label will not change between input state.\n\n~~~ html\n\u003cinput type=\"checkbox\" data-labelauty=\"Synchronize my files\"/\u003e\n~~~\n___________\n__Omitted__\n\nBy omitting this attribute, the default labels will be shown.\n\n~~~ html\n\u003cinput type=\"checkbox\"/\u003e\n~~~\n\n\nOptions\n-------------\n\nSet a new `class` value that will be applied to changed inputs.\n\n~~~ js\n$(\":checkbox\").labelauty({ class: \"myclass\" });\n~~~\n\nWhen `label` is set to `false`, only the input icon appears and changes.\n\n~~~ js\n$(\":checkbox\").labelauty({ label: false });\n~~~\n\nWhen `icon` is set to `false`, only the input text label appears and changes.\n\n~~~ js\n$(\":checkbox\").labelauty({ icon: false });\n~~~\n\nChange separator between custom labels, in __data-labelauty__ attribute.\nChoose your separator with `separator`.\n\n~~~ js\n$(\":checkbox\").labelauty({ separator: \"-\" });\n~~~\n\nDo you want to generate random ID's for all inputs?\nChange `force_random_id` to `true`.\n\n~~~ js\n$(\":checkbox\").labelauty({\n\tforce_random_id: true,\n});\n~~~\n\nDo you want custom default labels?\nSet new text in `checked_label` and `unchecked_label`.\n\n~~~ js\n$(\":checkbox\").labelauty({\n\tchecked_label: \"You selected this\",\n\tunchecked_label: \"You don't want it\"\n});\n~~~\n\nActually, custom labels have different number of characters or width.\nSo, you can set `minimum-width` to custom CSS option.\n\n~~~ js\n$(\":checkbox\").labelauty({ minimum_width: \"170px\" });\n~~~\n\nIf you dislike the previous option, then you can set labels with the same width.\nJust set `same_width` to `true`.\n\n~~~ js\n$(\":checkbox\").labelauty({ same_width: true });\n~~~\n\n\nCustomization\n-------------\n\nYou are free to customize all styles included in Labelauty jQuery Plugin.\n\nJust edit [jquery-labelauty.css] to your liking and change images as you wish.\n\n\nThe included CSS file is tiny and simple. Don't be afraid to change it.\n\n\nAcknowledgements\n----------------\n\n© 2013, Francisco Neves. Released under the [MIT License](License.md).\n\n**Labelauty** is authored and maintained by [Francisco Neves][francisconeves].\n\n[Contributors][c] can help to make this plugin better.\n\nYou can follow [Trello of this repo](https://trello.com/b/bXfzw5mz/jquery-labelauty).\n\n * [My website](http://francisconeves.com) (francisconeves.com)\n * [Github](http://github.com/fntneves) (@fntneves)\n * [Twitter](http://twitter.com/fntneves) (@fntneves)\n\n[francisconeves]: http://www.francisconeves.com\n[c]:   http://github.com/fntneves/jquery-labelauty/contributors\n[jquery-labelauty.js]: https://github.com/fntneves/jquery-labelauty/blob/master/source/jquery-labelauty.js\n[jquery-labelauty.css]: https://github.com/fntneves/jquery-labelauty/blob/master/source/jquery-labelauty.css\n[images]: https://github.com/fntneves/jquery-labelauty/tree/master/source/images\n[Options]: https://github.com/fntneves/jquery-labelauty#options\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffntneves%2Fjquery-labelauty","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffntneves%2Fjquery-labelauty","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffntneves%2Fjquery-labelauty/lists"}