Explore the usage and customization options for the Color Picker elements in JTB_MD, the component designed to allow basic color selections for your projects for a vibrant and visually appealing design.

About

Color Picker elements in JTB_MD use default <input> elements of browsers with type='color' attribute. In the library, the elements are re-designed with slight adjustments, for aligning them with the fundamental principles of JTB_MD.

In addition, the elements have been crafted to achieve a user-friendly appearance, and their adjustable structures provide features that can be utilized in various ways in your projects.

How to use

To incorporate a basic color picker in your project, effortlessly create an <input> element with the color type and apply the .jtbInput class to it.

                <!-- Example Color Picker -->
<input class='jtbInput' type='color' />

Disabling

To disable a color picker you can simply add .disabled class to your element.

                    <!-- Disabled Color Picker -->
<input class='jtbInput disabled' type='color'/>

Styles and Appearances

Once you've create the your element, modifying the version, shape, size etc. of them in JTB_MD is remarkably straightforward. To achieve this you can simply add its styling by including the appropriate additional classes, based on your customization requirements.

Never forget that you can leverage all classes from the Utilities section to seamlessly integrate elements with your design. However, the following pre-defined classes within Color Picker elements have been crafted to simplify your design workflow.

Shapes

For color pickers, besides default one, there are two defined shapes available in JTB_MD. You can easily apply any of these by adding their corresponding classes.

Rectengular: .jtbInput-rect Generates a rectangular-shaped element with sharp edges.
Circular: .jtbInput-circle Generates a circular-shaped element with hard rounded corners and no padding.

                    <!-- Default version -->
<input class='jtbInput' type='color'/>

<!-- Rectangular version -->
<input class='jtbInput jtbInput-rect' type='color'/>

<!-- Circular version -->
<input class='jtbInput jtbInput-circle' type='color'/>

Sizes

To make your color picker elements larger or smaller than the default, simply apply the relevant size-class to it.

.jtbInput-[ xs | sm | md | lg | xl ]

                                <!-- Color picker element with size xs -->
<input class='jtbInput jtbInput-xs' type='color'/>