input color

The color input element let the user specify a color by using a visual color picker interface.

According to the Web Content Accessibility Guidelines (WCAG), it is highly reccomended to use a label together with the color input.
Attention Safari Users: We regret to inform you that there is a known issue with the tabbing functionality in Safari, causing this component to not receive focus as intended. Please be aware of this limitation while navigating this component using the "Tab" key.
table of content

component variations

input color

Open on blank page

<label for="color-input-1" class="a-color-input">
  <input type="color" id="color-input-1" name="input color" />
</label>

input color with label

Open on blank page

<label for="color-input-2" class="a-color-input">
  <span class="a-color-input__label">Label</span>
  <input type="color" id="color-input-2" name="input color with label" />
</label>

input color disabled

Open on blank page

<label for="color-input-3" class="a-color-input a-color-input--disabled">
  <input
    type="color"
    id="color-input-3"
    name="input color disabled"
    disabled=""
  />
</label>

input color with label disabled

Open on blank page

<label for="color-input-4" class="a-color-input a-color-input--disabled">
  <span class="a-color-input__label">Label</span>
  <input
    type="color"
    id="color-input-4"
    name="input color with label disabled"
    disabled=""
  />
</label>

input color with very long label

Open on blank page

<label for="color-input-5" class="a-color-input">
  <span class="a-color-input__label">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
    consequatur distinctio provident voluptatum nisi recusandae quod asperiores
    quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
    numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
    laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
  </span>
  <input
    type="color"
    id="color-input-5"
    name="input color with very long label"
  />
</label>

input color with very long label disabled

Open on blank page

<label for="color-input-6" class="a-color-input a-color-input--disabled">
  <span class="a-color-input__label">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae omnis labore
    consequatur distinctio provident voluptatum nisi recusandae quod asperiores
    quo, architecto cum nesciunt nemo, vel minima possimus et blanditiis
    numquam, cupiditate deserunt fugit delectus earum ducimus alias! Quam atque
    laborum tempore alias magnam tenetur fuga facere totam, harum, ipsa sit!
  </span>
  <input
    type="color"
    id="color-input-6"
    name="input color with very long label disabled"
    disabled=""
  />
</label>

additional content

styles SCSS

.a-color-input {
  background: var(--neutral__enabled__fill__default);
  cursor: pointer;
  display: inline-flex;
  font-size: 1rem;
  --font-size: 1rem;
  padding: 0.75rem;

  &:before {
    background-color: var(
      --before-color,
      var(--neutral__enabled__front__default)
    );
    border: 1px solid var(--neutral__enabled__front__default);
    content: '';
    height: 1.5rem;
    min-width: 1.5rem;
    position: relative;
  }

  input[type='color'] {
    border: 0;
    height: auto; // Safari fix, with 0 the picker won't show
    opacity: 0;
    padding: 0;
    width: 0;
  }

  &__label {
    margin-left: 1rem;
  }

  &:hover {
    background: var(--neutral__enabled__fill__hovered);
  }

  &:active {
    background: var(--neutral__enabled__fill__pressed);
  }

  &.-focus-visible {
    @include focus-outside;
  }

  &--disabled {
    pointer-events: none;

    &:before {
      background-color: var(--neutral__disabled__fill__default);
      border: 1px solid var(--neutral__disabled__front__default);
    }

    .a-color-input__label {
      color: var(--neutral__disabled__front__default);
    }
  }
}