Font and theme export

Color Picker

Enhance a native color input with a themeable Pickr popup.

Basic example

ColorInput enhances a native <input type="color"> with a full Pickr popup - palette, hue/opacity sliders, swatches, hex/rgba/hsla. Opt in by adding data-color-picker="pickr": without it the input stays a plain native color swatch, completely unaffected. 

<div class="input-field">
  <input id="color-example-1" type="color" data-color-picker="pickr" data-color-theme="nano" value="#26a69a">
  <label for="color-example-1">Accent color</label>
</div>

Setup

Start with the kmaterialize CSS and JavaScript from Getting started, then follow the component setup below.

Pickr is an optional peer dependency, loaded on demand only when a data-color-picker="pickr" input is actually initialized - install it yourself: npm install @simonwep/pickr. 

import '@simonwep/pickr/dist/themes/nano.min.css';
import 'kmaterialize/dist/css/materialize.css';

Each opted-in input needs to resolve Pickr asynchronously before the popup exists - await instance.ready if you need to interact with it right after init. 


  document.addEventListener('DOMContentLoaded', function() {
    const elems = document.querySelectorAll('input[type="color"][data-color-picker="pickr"]');
    const instances = ColorInput.init(elems, {
      // specify options here
    });
  });

Examples and variants

These presets can be combined: start with the Pickr opt-in, then add a theme, French locale, or opacity setting with data attributes. Open each swatch to compare the result.

palette
colorize 
<!-- Themes -->
<div class="input-field">
  <input id="color-theme-classic" type="color" data-color-picker="pickr" data-color-theme="classic" value="#673ab7">
  <label for="color-theme-classic">Color Input Pickr</label>
</div>
<div class="input-field">
  <input id="color-theme-monolith" type="color" data-color-picker="pickr" data-color-theme="monolith" value="#3f51b5">
  <label for="color-theme-monolith">Color Input Monolith</label>
</div>
<div class="input-field">
  <input id="color-theme-nano" type="color" data-color-picker="pickr" data-color-theme="nano" value="#009688">
  <label for="color-theme-nano">Color Input Nano</label>
</div>

<!-- Locale -->
<div class="input-field">
  <input id="color-locale-fr" type="color" data-color-picker="pickr" data-color-locale="fr-fr" value="#e91e63">
  <label for="color-locale-fr">Color Input Pickr French</label>
</div>

<!-- Opacity -->
<div class="input-field">
  <input id="color-opacity-on" type="color" data-color-picker="pickr" value="rgba(255, 152, 0, 0.6)">
  <label for="color-opacity-on">Color Input Opacity</label>
</div>
<div class="input-field">
  <input id="color-opacity-off" type="color" data-color-picker="pickr" data-color-opacity="false" value="#ff9800">
  <label for="color-opacity-off">Color Input Without Opacity</label>
</div>
<div class="input-field">
  <input id="color-opacity-fr" type="color" data-color-picker="pickr" data-color-locale="fr-fr" value="rgba(0, 188, 212, 0.65)">
  <label for="color-opacity-fr">Color Input Opacity French</label>
</div>

<!-- Value / default -->
<div class="input-field">
  <input id="color-placeholder" type="color" data-color-picker="pickr">
  <label for="color-placeholder">No value set (placeholder)</label>
</div>
<div class="input-field">
  <input id="color-value-set" type="color" data-color-picker="pickr" value="#4caf50">
  <label for="color-value-set">Value already set</label>
</div>
<div class="input-field">
  <input id="color-value-default" type="color" data-color-picker="pickr" default="randomHex()">
  <label for="color-value-default">Value by default (random)</label>
</div>

<!-- Icons -->
<div class="input-field">
  <i class="material-icons">palette</i>
  <input id="color-icon-left" type="color" data-color-picker="pickr" value="#795548">
  <label for="color-icon-left">Icon on left</label>
</div>
<div class="input-field">
  <input id="color-icon-right" type="color" data-color-picker="pickr" value="#607d8b">
  <label for="color-icon-right">Icon on right</label>
  <i class="material-icons">colorize</i>
</div>

<!-- Disabled -->
<div class="input-field">
  <input id="color-disabled" type="color" data-color-picker="pickr" value="#9e9e9e" disabled>
  <label for="color-disabled">Disabled</label>
</div>

Validation

A native color input always has a color value; required and maxlength do not apply. Show a message for application rules, such as an unavailable brand color.

These previews keep their error state visible. In your form, show errors after checking a field or submitting, then clear them when the value is valid.

For text fields, use .input-field.error, aria-invalid="true", and a message linked with aria-describedby. Remove the error state when resolved. Use aria-live="polite" for messages updated dynamically.

Unsupported color

Choose a color from your approved brand palette.

<div class="input-field error">
    <input id="validation-color" type="color" data-color-picker="pickr" value="#ff0000" aria-invalid="true" aria-describedby="validation-color-error">
    <label for="validation-color">Brand color</label>
</div>
<p id="validation-color-error" class="supporting-text error-text"><i class="material-icons" aria-hidden="true">error</i> Choose a color from your approved brand palette.</p>

Reference

Options

Name Type Default Description
theme String 'classic' Pickr theme: 'classic', 'monolith' or 'nano'. Overridable per-input via data-color-theme.
opacity Boolean true Whether the opacity slider is shown. Locked via data-color-opacity="false".
swatches Array 14 preset colors Swatch palette shown in the popup.
locale Object undefined Pickr i18n string overrides. A built-in French translation is used automatically for data-color-locale="fr-fr" if this isn't passed.

Methods

All the methods are called on the plugin instance. You can get the plugin instance like this:


                  const instance = ColorInput.getInstance(elem);
.destroy();

Destroy plugin instance, removes the Pickr popup and un-hides the native input.


instance.destroy();

Properties

Name Type Description
el Element The native <input type="color"> the plugin was initialized with.
ready Promise<void> Resolves once Pickr has loaded and the popup has been created.
pickr Pickr The underlying Pickr instance, once ready resolves.