Color Input

<quiet-color-input>

stable

since 1.0

Color inputs let users enter or select a color and submit it with a form.

<quiet-color-input 
  label="Select a color"
  description="The cats like violet, but any color works"
  name="color"
  value="#f0803a" 
  with-input
  with-alpha
  with-eye-dropper
  clearable
></quiet-color-input>

Examples Jump to heading

Labels and descriptions Jump to heading

You can use the label and description attributes to provide plain text labels and descriptions for the color input. If you want to provide HTML, use the label and description slots instead.

For our cafe branding guidelines, visit our style guide.

<quiet-color-input 
  label="Select a color" 
  name="color"
>
  <span slot="description">
    For our cafe branding guidelines, <a href="https://example.com/" target="_blank">visit our style guide</a>.
  </span>
</quiet-color-input>

Providing an initial value Jump to heading

Use the value attribute to provide an initial value for the color input.

<quiet-color-input 
  label="Select a color"
  value="#7578c5" 
></quiet-color-input>

Enabling alpha Jump to heading

Add the with-alpha attribute to allow users to adjust opacity. Hex colors will become the eight-value syntax, e.g. #rrggbbaa, and other formats will include alpha as well.

<quiet-color-input 
  label="Select a color"
  value="#ce238088" 
  with-alpha
></quiet-color-input>

Adding a clear button Jump to heading

To add a clear button to the color input, use the clearable attribute. The quiet-input event will be emitted when the clear button is activated.

<quiet-color-input 
  label="Select a color"
  name="color"
  value="#21b8bc" 
  clearable
></quiet-color-input>

Setting the format Jump to heading

Use the format attribute to set the format of the value. Valid options include hex (default), rgb, and hsl.

<quiet-color-input 
  label="Select a color (RGB)"
  value="rgb(255, 204, 0)"
  format="rgb"
></quiet-color-input>

Filled and unstyled color inputs Jump to heading

Color inputs support multiple visual styles through the appearance attribute.

<quiet-color-input 
  label="Normal" 
  appearance="normal"
  value="#6366f1"
></quiet-color-input>

<br>

<quiet-color-input 
  label="Filled" 
  appearance="filled"
  value="#6366f1"
></quiet-color-input>

<br>

<quiet-color-input 
  label="Unstyled" 
  appearance="unstyled"
  value="#6366f1"
></quiet-color-input>

Pill-shaped text fields Jump to heading

Color inputs can be rendered with pill-shaped edges by adding the pill attribute.

<quiet-color-input pill label="Pill-shaped"></quiet-color-input>

Sizes Jump to heading

Use the size attribute to change the color input's size.

<quiet-color-input size="xs" label="Extra small"></quiet-color-input><br>
<quiet-color-input size="sm" label="Small"></quiet-color-input><br>
<quiet-color-input size="md" label="Medium"></quiet-color-input><br>
<quiet-color-input size="lg" label="Large"></quiet-color-input><br>
<quiet-color-input size="xl" label="Extra large"></quiet-color-input>

Disabling Jump to heading

Use the disabled attribute to disable the color input.

<quiet-color-input 
  label="Disabled color input"
  disabled
  value="#6366f1"
></quiet-color-input>

Showing swatches Jump to heading

Set the swatches attribute to one or more space-delimited hex colors or CSS color names, e.g. lightblue, to show as preset swatches below the color picker. This is useful for providing users with access to recent colors or a predefined color palette.

<quiet-color-input
  label="Select a color"
  swatches="
    #09090b #71717a #ef4444 #f97316 
    #f59e0b #eab308 #84cc16 #22c55e 
    #10b981 #14b8a6 #06b6d4 #3b82f6 
    #6366f1 #a855f7 #d946ef #ec4899
  "
></quiet-color-input>

Showing labels on the side Jump to heading

With the quiet-side-label utility, you can show labels on the side instead of on top of the color input. You can control the width of the label by setting the --label-width custom property.

<quiet-color-input
  class="quiet-side-label"
  style="--label-width: 10ch;"
  name="color" 
  label="Brand color" 
  description="Make it pop"
></quiet-color-input>
<br>
<quiet-color-input 
  class="quiet-side-label"
  style="--label-width: 10ch;"
  name="color" 
  label="Accent color" 
  description="Complementary colors work well here"
></quiet-color-input>

Validation Jump to heading

The required attribute can be applied to enable validation using the Constraint Validation API. This will prevent form submission when the color input is missing a value.

<form action="about:blank" target="_blank">
  <quiet-color-input 
    name="color"
    label="Select a color" 
    required
    style="margin-block-end: 1rem;"
  ></quiet-color-input>
  <quiet-button type="submit">Submit</quiet-button>
</form>

Using custom validation Jump to heading

Use the setCustomValidity() method to make the color input invalid and show a custom error message on submit. This will override all other validation parameters. To clear the error, remove the attribute or set it to an empty string.

<form action="about:blank" method="get" target="_blank" id="color-input__custom">
  <quiet-color-input 
    name="color"
    label="Select a color"
    description="This field will be invalid until custom validation is removed"
  ></quiet-color-input>
  <br>
  <quiet-button type="submit" variant="primary">Submit</quiet-button>
</form>

<script type="module">
  import { allDefined } from '/dist/quiet.js';

  await allDefined();

  const form = document.getElementById('color-input__custom');
  const colorInput = form.querySelector('quiet-color-input');

  colorInput.setCustomValidity('Please select a different color!');
</script>

Styling validation Jump to heading

You can style valid and invalid color inputs using the :valid and :invalid pseudo classes.

              
                Submit
                Reset

<form action="about:blank" method="get" target="_blank" class="field__validation-pseudo">
  <quiet-color-input 
    name="color"
    label="Select a color"
    description="This field is required"
    required
  ></quiet-color-input>
  <br>
  <quiet-button type="submit" variant="primary">Submit</quiet-button>
  <quiet-button type="reset">Reset</quiet-button>
</form>

<style>
  .field__validation-pseudo {
    quiet-color-input:valid {
      outline: solid 2px var(--quiet-constructive-stroke-mid);
      outline-offset: .5rem;
    }

    quiet-color-input:invalid {
      outline: solid 2px var(--quiet-destructive-stroke-mid);
      outline-offset: .5rem;
    }
  }
</style>

However, these selectors will match even before the user has had a chance to fill out the form. More often than not, you'll want to use the user-valid and user-invalid custom states instead. This way, validation styles are only shown after the user interacts with the form control or when the form is submitted.

              
                Submit
                Reset

<form action="about:blank" method="get" target="_blank" class="field__validation-custom">
  <quiet-color-input 
    name="color"
    label="Select a color"
    description="This field is required"
    required
  ></quiet-color-input>
  <br>
  <quiet-button type="submit" variant="primary">Submit</quiet-button>
  <quiet-button type="reset">Reset</quiet-button>
</form>

<style>
  .field__validation-custom {
    quiet-color-input:state(user-valid) {
      outline: solid 2px var(--quiet-constructive-stroke-mid);
      outline-offset: .5rem;
    }

    quiet-color-input:state(user-invalid) {
      outline: solid 2px var(--quiet-destructive-stroke-mid);
      outline-offset: .5rem;
    }
  }
</style>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN

npm

To manually import <quiet-color-input> from the CDN, use the following code.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.0.0/dist/components/color-input/color-input.js';

To manually import <quiet-color-input> from npm, use the following code.

import '@quietui/quiet/dist/components/color-input/color-input.js';

Slots Jump to heading

Color Input supports the following slots. Learn more about using slots

Name	Description
`label`	The color input's label. For plain-text labels, you can use the `label` attribute instead.
`description`	The color input's description. For plain-text descriptions, you can use the `description` attribute instead.

Properties Jump to heading

Color Input has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property / Attribute	Description	Type	Default
`label`	The color input's label. If you need to provide HTML in the label, use the `label` slot instead.	`string`
`description`	The color input's description. If you need to provide HTML in the description, use the `description` slot instead.	`string`
`name`	The name of the color input. This will be submitted with the form as a name/value pair.	`string`
`value`	The color input's value.	`string`	`''`
`placeholder`	A placeholder to show in the color input when it's blank.	`string`
`disabled`	Disables the color input.	`boolean`	`false`
`readonly`	Makes the color input a read-only area.	`boolean`	`false`
`clearable`	Adds a clear button to the color input when it's not blank.	`boolean`	`false`
`appearance`	The type of color input to render.	`'normal' 'filled' 'unstyled'`	`'normal'`
`size`	The color input's size.	`'xs' 'sm' 'md' 'lg' 'xl'`	`'md'`
`pill`	Draws the text field in a pill shape.	`boolean`	`false`
`format`	The format to use for the color's value.	`'hex' 'rgb' 'hsl'`	`'hex'`
`swatches`	One or more space-delimited hex colors or CSS color names, e.g. `lightblue`, to show as preset swatches below the color picker.	`string`	`''`
`withAlpha` `with-alpha`	Enables the alpha slider.	`boolean`	`false`
`withEyeDropper` `with-eye-dropper`	Enables the eye dropper button. Only available in supportive browsers.	`boolean`	`false`
`placement`	The placement of the dropdown menu in reference to the trigger. The menu will shift to a more optimal location if the preferred placement doesn't have enough room.	`'top' 'top-start' 'top-end' 'bottom' 'bottom-start' 'bottom-end' 'right' 'right-start' 'right-end' 'left' 'left-start' 'left-end'`	`'bottom-start'`
`distance`	The distance of the dropdown menu from its trigger.	`number`	`0`
`offset`	The offset of the dropdown menu along its trigger.	`number`	`0`
`form`	The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of this attribute must be an ID of a form in the same document or shadow root.	`string`
`required`	Makes the color input required. Form submission will not be allowed when this is set and the color input is blank.	`boolean`	`false`
`autocomplete`	Tells the browser how to autocomplete the color input. See this page for available values.	`string`
`autofocus`	Tells the browser to focus the color input when the page loads or a dialog is shown.	`boolean`
`enterkeyhint`	Sets the enter key label on virtual keyboards.	`'enter' 'done' 'go' 'next' 'previous' 'search' 'send'`
`inputmode`	Provides the browser with a hint about the type of data that might be entered by the user, allowing the appropriate virtual keyboard to be displayed on supported devices.	`'none' 'text' 'decimal' 'numeric' 'tel' 'search' 'email' 'url'`

Methods Jump to heading

Color Input supports the following methods. You can obtain a reference to the element and call them like functions in JavaScript. Learn more about methods

Name	Description	Arguments
`blur()`	Removes focus from the color input.
`focus()`	Sets focus to the color input.
`getValueAs()`	Gets the current value as a hex string, a hex8 string, an RGB object, or an HSL object. RBG objects have `r`, `g`, and `b` properties ranging from 0–255 and an `a` property (representing opacity) that ranges from 0-1. HSL objects have an `h` property ranging from `0-359` and `s`, `l`, and `a` properties ranging from 0–1.	`format: 'hex' <br> 'hex8' <br> 'hsl' <br> 'rgb'`
`select()`	Selects all text in the color input.
`setSelectionRange()`	Sets the start and end positions of the current text selection in the color input.	`start: number, end: number, direction: 'forward' <br> 'backward' <br> 'none'`
`setRangeText()`	Replaces a range of text in the color input with a new string.	`replacement: string, start: number, end: number, selectMode: 'select' <br> 'start' <br> 'end' <br> 'preserve'`
`showPicker()`	Shows the color picker.
`hidePicker()`	Hides the color picker.
`checkValidity()`	Checks if the form control has any restraints and whether it satisfies them. If invalid, `false` will be returned and the `invalid` event will be dispatched. If valid, `true` will be returned.
`reportValidity()`	Checks if the form control has any restraints and whether it satisfies them. If invalid, `false` will be returned and the `invalid` event will be dispatched. In addition, the problem will be reported to the user. If valid, `true` will be returned.
`setCustomValidity()`	Sets a custom validation message for the form control. If this message is not an empty string, then the form control is considered invalid and the specified message will be displayed to the user when reporting validity. Setting an empty string clears the custom validity state.	`message: string`

Events Jump to heading

Color Input dispatches the following custom events. You can listen to them the same way was native events. Learn more about custom events

Name	Description
`change`
`input`
`quiet-blur`	Emitted when the color input loses focus. This event does not bubble.
`quiet-change`	Emitted when the user commits changes to the color input's value.
`quiet-focus`	Emitted when the color input receives focus. This event does not bubble.
`quiet-input`	Emitted when the color input receives input.

CSS custom properties Jump to heading

Color Input supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties

Name	Description	Default
`--show-duration`	The duration of the show/hide animation.	`50ms`
`--preview-size`	The size of the color preview.	`1.6em`

CSS parts Jump to heading

Color Input exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts

Name	Description	CSS selector
`label`	The element that contains the color input's label.	`::part(label)`
`description`	The element that contains the color input's description.	`::part(description)`
`visual-box`	The element that wraps the internal text box.	`::part(visual-box)`
`text-box`	The internal text box, an `<input>` element.	`::part(text-box)`
`clear-button`	The clear button, a `<button>` element.	`::part(clear-button)`

Custom States Jump to heading

Color Input has the following custom states. You can target them with CSS using the selectors shown below. Learn more about custom states

Name	Description	CSS selector
`disabled`	Applied when the color input is disabled.	`:state(disabled)`
`blank`	Applied when the color input has a blank value.	`:state(blank)`
`focused`	Applied when the color input has focus.	`:state(focused)`
`open`	Applied when the color picker is open.	`:state(open)`
`user-valid`	Applied when the color input is valid and the user has sufficiently interacted with it.	`:state(user-valid)`
`user-invalid`	Applied when the color input is invalid and the user has sufficiently interacted with it.	`:state(user-invalid)`

Dependencies Jump to heading

Color Input automatically imports the following elements. Sub-dependencies are also included in this list.

<->

Color Input

Examples Jump to heading #

Labels and descriptions Jump to heading #

Providing an initial value Jump to heading #

Enabling alpha Jump to heading #

Adding a clear button Jump to heading #

Setting the format Jump to heading #

Filled and unstyled color inputs Jump to heading #

Pill-shaped text fields Jump to heading #

Sizes Jump to heading #

Disabling Jump to heading #

Showing swatches Jump to heading #

Showing labels on the side Jump to heading #

Validation Jump to heading #

Using custom validation Jump to heading #

Styling validation Jump to heading #

API Jump to heading #

Importing Jump to heading #

Slots Jump to heading #

Properties Jump to heading #

Methods Jump to heading #

Events Jump to heading #

CSS custom properties Jump to heading #

CSS parts Jump to heading #

Custom States Jump to heading #

Dependencies Jump to heading #