A lightweight and beautiful jQuery plugin for radio and checkbox inputs.

  • By Francisco Neves
  • Last update: Nov 27, 2022
  • Comments: 11

This repository is no longer mantained.

I recommend you to use reactive and modern JavaScript frameworks, such as VueJS and React.

Labelauty jQuery Plugin

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

Demo: http://fntneves.github.io/jquery-labelauty

Note: Labelauty does not support Internet Explorer 7 and 8.

Installation

Install with Bower :

bower install labelauty --save

Install with NPM :

npm install labelauty --save

Install with Yarn :

yarn add labelauty

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?

Aria Uses

To add a Aria attributes, just add a aria-label. Labelauty will add tabindex, role and checked attributes.

<input aria-label="This branch is awesome" type="checkbox"/>

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 state.

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 lets you write custom labels for unchecked|checked cases. Pipe character |, is the default separator between these two labels. You can change it (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 states.

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

Message

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

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

Omitted

By omitting 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 set to false, only the input icon appears and changes.

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

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

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

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

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

Do you want to generate random ID's for all inputs? Change force_random_id to true.

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

Do you want custom 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 have 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 the 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.

You can follow Trello of this repo.

Github

https://github.com/fntneves/jquery-labelauty

Comments(11)

  • 1

    Added ARIA attributes

    Gets the Aria label from the input element and adds it to the "label" automatically. If an Aria label is set: Checkboxes can be toggled using the 'space bar' and navigated using 'tab'.

    if no Aria label is set, then it defaults to the normal setup.

  • 2

    Doesn't work if your radio buttons have ids

    The plugin doesn't work on radio buttons that have ids set. Usually I wouldn't set ids on radio buttons but ASP.NET MVC does this automatically. It's quite easily fixed by changing this line:

    if( input_id == null )

    To this:

    if( input_id == null || $object.is(':radio') )
  • 3

    Differentiate radio & checkbox

    Hello,

    Thank you for your awesome plugin.

    I was just annoyed because you cannot differentiate radio elements and checkbox elements out of the box.

    I edited the create function to add a new parameter "type" :

    function create( input_id, messages_object, label, type )

    And the line which is calling this function with the type of the current element :

    $object.after( create( input_id, labels_object, use_labels, $object.attr("type") ) );

    And finally I added a custom class to the label markup :

    block = '<label class="customClassFor'+type+'" for="' + input_id + '">' +

    I can now apply a different styling for radio or checkbox (circle radio and square checkbox for example)

    Maybe it could help somebody.

  • 4

    Issue in calculating width of the label

    The unchecked_width and checked_width seems to be returning 0 when the plugin is used in a tab which is inactive.

    PFA the screenshot.

    capture

    This might not be an issue too. Just wanted to report this :)

    Thanks guys.

  • 5

    Please tag your releases

    Hi,

    Thank you for this project. Please can you tag your releases, so that they're easier for users to track? https://github.com/fntneves/jquery-labelauty/releases shows a most-recent release of 1.1.0, which is what then shows up in tools tracking Github. But your commit log shows that you have designated subsequent points in the tree as 1.1.1, 1.1.2, 1.1.3.

    David

  • 6

    Changing colors

    Hey there,

    great component - i had a quick question regarding changing colors of individual checkboxes.. is there a way to do that? I dont want them all to be the same color - but varied.. is there a way to do that?

    thanks

  • 7

    Bower information

    This is to allow the installation of your package via Bower (http://bower.io) Once merged, you have to register it here: http://bower.io/docs/creating-packages/#register

  • 8

    support a dispose func

    hi, this is a great input wrapper plugin! but l use it with turbolinks, can you support a dispose func to delete labelauty instande and remove relative dom element?

  • 9

    Chrome Error: Form control not focusable

    If an input changed with labelauty is requred and its form is submitted chrome sometimes responds: "An invalid form control with name='xxx' is not focusable."

  • 10

    How to invoke plugin on dynamic content multiple times

    Hi there,

    Invoking the plugin on dynamic content multiple times produces multiple <label> tags which is not the desired behavior knowing that labelauty-fied inputs are all having different ids.

    So is there any flag to force override of target elements instead of appending to them?

  • 11

    [NFR] Accessibility improvement: focus and keyboard support

    It would be really awesome if checkboxes and radios could be focused with TAB and checked/unchecked with SPACE, as it is with native checkboxes and radios. :)

Popular Tag

Related