A jQuery Tag Cloud Generator Using Select Fields

Download View on GitHub


TagCloud is a jQuery tag cloud generator. It uses the HTML mutiple select field to generate the tags and can be used in forms and anything else a normal HTML select field would be used in.

Installation & Setup

All the installation that is required is simply including the compiled CSS and JS files in your document and TagCloud will now be available on every page it is included on.


The follow properties are available for TagCloud upon initialization

Parameter Description Default
Max The Maximum Number of tags that can be selected Infinite (No Max)

Example Usage

An example usage showing each parameter is as follows:

    <select id="tagcloud" multiple>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
        <option value="ford">Ford</option>

        max: 3


The base styling that comes with the tag cloud can be easily customized.

The followed classes are available (as well as what they are):

Class Name Description
.tc-wrapper Wraps the entire tag cloud (including hidden select)
.tc-cloud Wraps all the tags
.tc-tag Individual Tags
.tc-selected Any currently selected tags


MIT License

View Demo Download View on GitHub