Mishka
Chelekom

Color Swatch

v0.0.10

v0.0.10StableHeadlessStatelessAccessibleApache-2.0
Installation mix mishka.ui.gen.headless color_swatch
Source View Source

Overview of the Phoenix and LiveView Headless Color Swatch Component

The Mishka Chelekom Headless Color Swatch is a Phoenix function component that shows one color in a LiveView page. It renders a <span role="img"> whose background is the color you pass, any CSS color, with an aria-label that defaults to the color value. Content in the default slot is drawn on top of the color, for example a check mark on the selected swatch.

The swatch has no parts and sets no size, shape or border. The only styling hook is class, so you size and round it with Tailwind utilities.

Base UI Color Swatch example - round and square swatches with a check (Phoenix headless)

Base UI Color Swatch example - round and square swatches with a check (Phoenix headless)

heex
<div class="flex items-center gap-3">
  <.color_swatch color="#fa5252" class="inline-block size-9 rounded-full ring-1 ring-black/10" />
  <.color_swatch color="#7048e8" class="inline-block size-9 rounded-full ring-1 ring-black/10" />
  <.color_swatch color="#12b886" class="inline-block size-9 rounded-lg ring-1 ring-black/10" />
  <.color_swatch color="#1c7ed6" label="Selected" class="inline-flex size-9 items-center justify-center rounded-full text-white ring-1 ring-black/10">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4">
      <path
        fill-rule="evenodd"
        d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
        clip-rule="evenodd"
      />
    </svg>
  </.color_swatch>
</div>

Color, label and overlay content

color is required and takes any CSS color: a hex code, rgb(), hsl() or a color name. It is written into an inline background-color style, so pass only colors you chose yourself and never raw user input.

label becomes the aria-label. Without it the label is the color value, which says little to a screen reader, so name the colors people choose between ("Red", "Selected").

The swatch is an inline span with no size, so set a width and height (size-9), a shape (rounded-full) and, for light colors, a ring or border so the swatch stays visible on a white page. To center an overlay, make the swatch inline-flex with items-center justify-center. id is optional.

Parts & data attributes

The swatch has a single part, the root element, which also carries the class chelekom-color-swatch.

Partdata-partState / ARIAPurpose
Root-role="img", aria-label, inline background-colorThe colored span. Overlay content goes inside it.

Accessibility

A swatch is an image with a text alternative: role="img" and an aria-label. It is not focusable and has no keyboard behavior, and there is no formal ARIA pattern for it. For a choice between colors, use native radio inputs around the swatches so they are focusable and submit a value.