Color input

#Example

<div class="flex items-center gap-3">
  <input type="color" class="color-input color-input-sm" value="#0ea5e9" aria-label="Small color">
  <input type="color" class="color-input" value="#8b5cf6" aria-label="Brand color">
  <input type="color" class="color-input color-input-lg" value="#f43f5e" aria-label="Large color">
</div>

#Classes

3 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

.color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.file-input:focus-visible, .color-input:focus-visible {
  --_line: var(--tone);
}

.input-sm,
.select-sm,
.textarea-sm,
.file-input-sm,
.input-group-sm,
.color-input-sm {
  --field-h: var(--m-control-h-sm);
  --field-px: .625rem;
  --field-fs: var(--m-control-fs-sm);
  --field-radius: var(--m-radius-sm);
}

.input-lg,
.select-lg,
.textarea-lg,
.file-input-lg,
.input-group-lg,
.color-input-lg {
  --field-h: var(--m-control-h-lg);
  --field-px: 1rem;
  --field-fs: var(--m-control-fs-lg);
  --field-radius: var(--m-radius-lg);
}

#Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Color input: start from the base class, then add modifiers -->
<div class="flex items-center gap-3">
  <input type="color" class="color-input color-input-sm" value="#0ea5e9" aria-label="Small color">
  <input type="color" class="color-input" value="#8b5cf6" aria-label="Brand color">
  <input type="color" class="color-input color-input-lg" value="#f43f5e" aria-label="Large color">
</div>

#Accessibility

• Give every control a visible label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-describedby; invalid styles use :user-invalid, so they appear only after the user interacts.
• Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.

#Related components