Labelauty jQuery Plugin

A nice and lightweigth jQuery plugin that gives beauty to checkboxes and radio buttons and allows custom labels for each status of (un)checked inputs.

Demo: http://labelauty.francisconeves.com/

Installation

Include jQuery, jquery-labelauty.js, jquery-labelauty.css and images folder in your project.

Fast Usage

Write your checkbox or radio input in body section and call labelauty() to beautify it. Note: Call plugin when document is ready. See below:

<input type="checkbox"/>

$(document).ready(function(){
	$(":checkbox").labelauty();
});

Simple, isn't it?

Use Cases

• If you want to create user-friendly websites, this is the right choice!

• Very useful in remember me checkboxes, in settings panel, etc.

How does it work ?

The above case will generate one checkbox with default labels "Checked" and "Unchecked", one for each input status.

You can change the default labels (see Options section) or give custom labels to each checkbox, like the following example:

<input type="checkbox" data-labelauty="Don't synchronize files|Synchronize my files"/>

$(document).ready(function(){
	$(":checkbox").labelauty();
});

The data-labelauty attribute of radio and checkbox inputs let you write custom label for the unchecked|checked case. Pipe character |, is the default separator between these two labels. You can change this (see Options section).

The data-labelauty attribute can be used in three different ways:

---

Unchecked|Checked

To choose a custom label for Unchecked and Checked status.

<input type="checkbox" data-labelauty="Don't synchronize files|Synchronize my files"/>

---

Message

Without separator, the Message text will be the permament label. It means that label will not change between input status.

<input type="checkbox" data-labelauty="Synchronize my files"/>

---

Omited

By omiting this attribute, the default labels will be shown.

<input type="checkbox"/>

Options

Set a new class value that will be applied to changed inputs.

$(":checkbox").labelauty({ class: "myclass" });

When label is setted to false, only the input icon appears and changes.

$(":checkbox").labelauty({ label: false });

Change separator between custom labels, in data-labelauty attribute. Choose your separator with separator.

$(":checkbox").labelauty({ separator: "-" });

Do you want another default labels? Set new text in checked_label and unchecked_label.

$(":checkbox").labelauty({
	checked_label: "You selected this",
	unchecked_label: "You don't want it"
});

Actually, custom labels has different number of characters or width. So, you can set minimum-width to custom CSS option.

$(":checkbox").labelauty({ minimum_width: "170px" });

If you dislike the previous option, then you can set labels with same width. Just set same_width to true.

$(":checkbox").labelauty({ same_width: true });

Customization

You are free to customize all styles included in Labelauty jQuery Plugin.

Just edit jquery-labelauty.css to your liking and change images as you wish.

The included CSS file is tiny and simple. Don't be afraid to change it.

Acknowledgements

© 2013, Francisco Neves. Released under the MIT License.

Labelauty is authored and maintained by Francisco Neves. Contributors can help to make this plugin better.

• My website (francisconeves.com)
• Github (@francisconeves)
• Twitter (@fntneves)