Color field
A colour picker beside a text field. The text field holds the colour and is what the form sends.
A text field with a colour, and the picker beside it
<div class="field" style="max-width: 20rem">
<label for="cf-text">Text color</label>
<div class="input-group color-field">
<span><input type="color" aria-label="Pick the text color"></span>
<input type="text" id="cf-text" name="text_color" value="#595d69">
</div>
<small>The color of body text.</small>
</div>An empty text field sends no colour, and the picker shows none
<div class="field" style="max-width: 20rem">
<label for="cf-empty">Link color</label>
<div class="input-group color-field">
<span><input type="color" aria-label="Pick the link color"></span>
<input type="text" id="cf-empty" name="link_color" placeholder="Inherits the accent color">
</div>
</div>A three digit value sets the picker too
<div class="field" style="max-width: 20rem">
<label for="cf-short">Background color</label>
<div class="input-group color-field">
<span><input type="color" aria-label="Pick the background color"></span>
<input type="text" id="cf-short" name="background_color" value="#000">
</div>
</div>disabled on both inputs dims the field
<div class="field" style="max-width: 20rem">
<label for="cf-disabled">Footer color</label>
<div class="input-group color-field">
<span><input type="color" aria-label="Pick the footer color" disabled></span>
<input type="text" id="cf-disabled" name="footer_color" value="#191a1f" disabled>
</div>
</div>The form hears input when a colour is picked or typed, and sends the text field
<form class="stack" data-gap="sm" style="max-width: 20rem" id="cf-form" oninput="document.getElementById('cf-result').textContent = new FormData(this).get('button_color')">
<div class="field">
<label for="cf-button">Button color</label>
<div class="input-group color-field">
<span><input type="color" aria-label="Pick the button color"></span>
<input type="text" id="cf-button" name="button_color" value="#0a7f6e">
</div>
</div>
<pre id="cf-result">#0a7f6e</pre>
</form>With opacity
Add data-alpha to accept an opacity. The text may
then be #rgba, #rrggbbaa or
rgb() / rgba(), and the slider in the
last span sets it. The picker shows the colour and
its swatch fades with the opacity. The text is written as
#rrggbb, or #rrggbbaa when the opacity
is below 100%. A browser's colour dialog has no opacity of its
own.
<div class="field" style="max-width: 24rem">
<label for="cf-alpha">Overlay color</label>
<div class="input-group color-field" data-alpha>
<span><input type="color" aria-label="Pick the overlay color"></span>
<input type="text" id="cf-alpha" name="overlay_color" value="#1a73e880">
<span><input type="range" class="slider" min="0" max="100" aria-label="Opacity"></span>
</div>
<small>Type #rgba, #rrggbbaa or rgba(26, 115, 232, 0.5), or use the opacity slider.</small>
</div>API
The colour field has no methods and sends no events of its own:
the text field sends the browser's own input and
change, and they bubble. It starts every
.color-field on the page, also one added later. A
form reset puts the original text back and the picker follows.
Events
| Event | On | Description |
|---|---|---|
input |
the input[type=text], bubbles |
Sent when a colour is picked, as it is when you type in the text field. |
change |
the input[type=text], bubbles |
Sent when the browser's colour dialog closes with a new colour, or when the text field loses focus after typing. |
Keyboard
| Key | Description |
|---|---|
| Tab | Moves from the picker to the text field. This is the browser's own. |
| Enter, Space | On the picker, opens the browser's colour dialog. This is the browser's own. |
Attributes
| Attribute / element | Values | Description |
|---|---|---|
.color-field |
on an .input-group |
Marks the group as a colour field. It holds a
span with the picker, then the text field.
|
input[type=color] |
in the first span |
The browser's picker. Give it an aria-label;
the text field has the visible label. Add
disabled together with the text field.
|
input[type=text] |
value: #rgb,
#rrggbb or empty; name
|
The colour a form sends. The picker shows it. Empty sends
no colour. Add placeholder to say what an
empty field means.
|
data-alpha |
present or absent, on .color-field |
Accepts an opacity: the text may be #rgba,
#rrggbbaa or rgb() /
rgba(). Without it only #rgb and
#rrggbb are colours. The text is written as
#rrggbbaa when the opacity is below 100%.
|
input[type=range] |
class slider, in a last span,
with data-alpha
|
The opacity from 0 to 100. Give it an
aria-label. Add
disabled together with the other inputs.
|
data-empty |
present or absent, set by the script | Present on the group while the text field is empty. The picker then shows no colour. |
aria-invalid |
true |
On the text field: the group gets a red border, as in an input group. |