Color check

The color check is a great way to make your form more user-friendly and engaging. You can use the color check to create a visually appealing form that will help users make decisions quickly and easily.

Your input controls can come in a variety of colors, depending on your preferences. Click here to see the list of available colors.

<label class="form-colorinput">
  <input name="..." type="radio" value="..." class="form-colorinput-input" />
  <span class="form-colorinput-color bg-lime"></span>
</label>

There is also an example of a color input:

If you need to select only one color, you can use the radio input type:

<label class="form-colorinput">
  <input name="..." type="radio" value="..." class="form-colorinput-input" />
  <span class="form-colorinput-color bg-dark rounded-circle"></span>
</label>

Input color picker

Add an color picker to your form to let users customise it according to their preferences.

<input type="color" class="form-control form-control-color" value="#066fd1" title="Choose your color">

There is also an example of a color picker input:

Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like Tabler? tweet about it!
Support Tabler's development: Github Sponsors
illustrations banner imageillustrations banner image dark
65 sleek illustrations for your startup's visual identity.