# Garment care label wash picker

> A satin care label sewn into a seam: choose a wash temperature and its symbol gets outlined in blue stitching.

- Category: [Radio buttons](https://library.aimran.es/components/radios)
- Built with: HTML + CSS
- Live editor: https://library.aimran.es/blocks/uv-rd-care-label
- Library: AIMRAN Library (https://library.aimran.es), free, no sign-up, by Aimran Oukham

## Where to use it

A white satin care label hangs from a knitted seam, with the fibre content at the top and four laundry symbols drawn as SVG: hand wash and the tub with one, two or three dots. Choosing a row inks its symbol in blue, pops it in and surrounds the row with a dashed stitch line. It works for laundry apps, clothing product pages and textile care guides.

The main color is the stitched ink and the secondary color the jersey seam. Change the composition, the country line and the four programmes to match your garment, and keep each description to a few words.

## Code

### HTML

```html
<fieldset class="uvq04-care"><legend>Washing</legend><div class="sm" aria-hidden="true"></div><div class="lb"><p class="cm" aria-hidden="true">92% cotton<br>8% elastane</p><label><input type="radio" name="uvq04-care"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 9h18l-2.2 10H5.2z"/><path d="M3 9c2-1.8 4 1.8 6 0s4 1.8 6 0 4 1.8 6 0"/><path d="M10 17.5v-3.2M12 17.5v-3.8M14 17.5v-3.2M9 15.8l1 1.7h4"/></svg><span><b>By hand</b><small>Delicates</small></span></label><label><input type="radio" name="uvq04-care"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 9h18l-2.2 10H5.2z"/><path d="M3 9c2-1.8 4 1.8 6 0s4 1.8 6 0 4 1.8 6 0"/><circle class="f" cx="12" cy="14.5" r="1"/></svg><span><b>30 °C</b><small>Wool and silk</small></span></label><label><input type="radio" name="uvq04-care" checked><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 9h18l-2.2 10H5.2z"/><path d="M3 9c2-1.8 4 1.8 6 0s4 1.8 6 0 4 1.8 6 0"/><circle class="f" cx="10.3" cy="14.5" r="1"/><circle class="f" cx="13.7" cy="14.5" r="1"/></svg><span><b>40 °C</b><small>Colours</small></span></label><label><input type="radio" name="uvq04-care"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 9h18l-2.2 10H5.2z"/><path d="M3 9c2-1.8 4 1.8 6 0s4 1.8 6 0 4 1.8 6 0"/><circle class="f" cx="8.6" cy="14.5" r="1"/><circle class="f" cx="12" cy="14.5" r="1"/><circle class="f" cx="15.4" cy="14.5" r="1"/></svg><span><b>60 °C</b><small>White cotton</small></span></label><p class="mk" aria-hidden="true">Made in Portugal</p></div></fieldset>
```

### CSS

```css
.uvq04-care {
  --c1: #1f5f8b;
  --c2: #8f96a0;
  --s: 16px;
  /* tamaño */
  --k: 1;
  /* velocidad */
  --fg: #1d1d1f;
  /* texto */
  --bg: #f5f5f7;
  /* fondo */
}

.uvq04-care {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.uvq04-care legend {
  padding: 0;
  margin: 0 0 .8em;
  font-weight: 700;
  width: 100%;
  text-align: center;
}

.uvq04-care .sm {
  position: relative;
  z-index: 1;
  width: 15em;
  height: 1.3em;
  border-radius: .3em;
  background: repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px),linear-gradient(color-mix(in srgb,var(--c2),#fff 15%),color-mix(in srgb,var(--c2),#000 15%));
  box-shadow: 0 .2em .35em rgba(0,0,0,.25);
}

.uvq04-care .sm::after {
  content: "";
  position: absolute;
  left: .4em;
  right: .4em;
  top: 50%;
  border-top: 1.5px dashed rgba(255,255,255,.55);
}

.uvq04-care .lb {
  width: 11.5em;
  margin-top: -.45em;
  padding: 1.3em .8em 1em;
  box-sizing: border-box;
  border-radius: 0 0 .2em .2em;
  color: #3a3a3a;
  background: linear-gradient(100deg,transparent 18%,rgba(255,255,255,.65) 34%,transparent 50%),repeating-linear-gradient(90deg,rgba(0,0,0,.025) 0 1px,transparent 1px 2px),#f6f4ef;
  box-shadow: 0 .8em 1.6em -1em rgba(0,0,0,.5),inset 0 .5em .4em -.4em rgba(0,0,0,.18);
}

.uvq04-care .cm {
  margin: 0 0 .7em;
  text-align: center;
  font-size: .64em;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5;
  text-transform: uppercase;
}

.uvq04-care label {
  position: relative;
  display: grid;
  grid-template-columns: 1.9em 1fr;
  align-items: center;
  gap: .6em;
  margin-bottom: .25em;
  padding: .3em .45em;
  border: 1.5px dashed transparent;
  border-radius: .4em;
  cursor: pointer;
  transition: background calc(0.25s / var(--k)) cubic-bezier(.25,.1,.25,1),border-color calc(0.25s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq04-care input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.uvq04-care label svg {
  width: 1.9em;
  height: 1.9em;
  fill: none;
  stroke: #3a3a3a;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke calc(0.25s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq04-care label svg .f {
  fill: #3a3a3a;
  stroke: none;
  transition: fill calc(0.25s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq04-care label span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.uvq04-care label b {
  font-size: .82em;
}

.uvq04-care label small {
  font-size: .66em;
  opacity: .65;
}

.uvq04-care label:hover {
  background: rgba(0,0,0,.04);
}

.uvq04-care label:active {
  transform: scale(.98);
}

.uvq04-care label:has(input:checked) {
  border-color: var(--c1);
  background: color-mix(in srgb,var(--c1) 9%,transparent);
  color: var(--c1);
}

.uvq04-care input:checked + svg {
  stroke: var(--c1);
  animation: uvq04-care calc(0.45s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq04-care input:checked + svg .f {
  fill: var(--c1);
}

.uvq04-care label:has(input:focus-visible) {
  outline: 2px solid #3a3a3a;
  outline-offset: 2px;
}

.uvq04-care .mk {
  margin: .6em 0 0;
  text-align: center;
  font-size: .56em;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
}

@keyframes uvq04-care {
  from {
    transform: scale(.7);
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq04-care,.uvq04-care *,.uvq04-care *::before,.uvq04-care *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
```

### React

```tsx
import type { CSSProperties } from "react";

const css = `
.uvq04-care {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.uvq04-care legend {
  padding: 0;
  margin: 0 0 .8em;
  font-weight: 700;
  width: 100%;
  text-align: center;
}

.uvq04-care .sm {
  position: relative;
  z-index: 1;
  width: 15em;
  height: 1.3em;
  border-radius: .3em;
  background: repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px),linear-gradient(color-mix(in srgb,var(--c2),#fff 15%),color-mix(in srgb,var(--c2),#000 15%));
  box-shadow: 0 .2em .35em rgba(0,0,0,.25);
}

.uvq04-care .sm::after {
  content: "";
  position: absolute;
  left: .4em;
  right: .4em;
  top: 50%;
  border-top: 1.5px dashed rgba(255,255,255,.55);
}

.uvq04-care .lb {
  width: 11.5em;
  margin-top: -.45em;
  padding: 1.3em .8em 1em;
  box-sizing: border-box;
  border-radius: 0 0 .2em .2em;
  color: #3a3a3a;
  background: linear-gradient(100deg,transparent 18%,rgba(255,255,255,.65) 34%,transparent 50%),repeating-linear-gradient(90deg,rgba(0,0,0,.025) 0 1px,transparent 1px 2px),#f6f4ef;
  box-shadow: 0 .8em 1.6em -1em rgba(0,0,0,.5),inset 0 .5em .4em -.4em rgba(0,0,0,.18);
}

.uvq04-care .cm {
  margin: 0 0 .7em;
  text-align: center;
  font-size: .64em;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5;
  text-transform: uppercase;
}

.uvq04-care label {
  position: relative;
  display: grid;
  grid-template-columns: 1.9em 1fr;
  align-items: center;
  gap: .6em;
  margin-bottom: .25em;
  padding: .3em .45em;
  border: 1.5px dashed transparent;
  border-radius: .4em;
  cursor: pointer;
  transition: background calc(0.25s / var(--k)) cubic-bezier(.25,.1,.25,1),border-color calc(0.25s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq04-care input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.uvq04-care label svg {
  width: 1.9em;
  height: 1.9em;
  fill: none;
  stroke: #3a3a3a;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke calc(0.25s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq04-care label svg .f {
  fill: #3a3a3a;
  stroke: none;
  transition: fill calc(0.25s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq04-care label span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.uvq04-care label b {
  font-size: .82em;
}

.uvq04-care label small {
  font-size: .66em;
  opacity: .65;
}

.uvq04-care label:hover {
  background: rgba(0,0,0,.04);
}

.uvq04-care label:active {
  transform: scale(.98);
}

.uvq04-care label:has(input:checked) {
  border-color: var(--c1);
  background: color-mix(in srgb,var(--c1) 9%,transparent);
  color: var(--c1);
}

.uvq04-care input:checked + svg {
  stroke: var(--c1);
  animation: uvq04-care calc(0.45s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq04-care input:checked + svg .f {
  fill: var(--c1);
}

.uvq04-care label:has(input:focus-visible) {
  outline: 2px solid #3a3a3a;
  outline-offset: 2px;
}

.uvq04-care .mk {
  margin: .6em 0 0;
  text-align: center;
  font-size: .56em;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
}

@keyframes uvq04-care {
  from {
    transform: scale(.7);
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq04-care,.uvq04-care *,.uvq04-care *::before,.uvq04-care *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
`;

export default function RdCareLabel() {
  return (
    <>
      <style>{css}</style>
      <div
        style={{
          "--c1": "#1f5f8b",
          "--c2": "#8f96a0",
          "--s": "16px",
          "--k": "1",
          "--fg": "#1d1d1f",
          "--bg": "#f5f5f7",
        } as CSSProperties}
      >
        <fieldset className="uvq04-care"><legend>Washing</legend><div className="sm" aria-hidden="true"></div><div className="lb"><p className="cm" aria-hidden="true">92% cotton<br />8% elastane</p><label><input type="radio" name="uvq04-care" /><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 9h18l-2.2 10H5.2z" /><path d="M3 9c2-1.8 4 1.8 6 0s4 1.8 6 0 4 1.8 6 0" /><path d="M10 17.5v-3.2M12 17.5v-3.8M14 17.5v-3.2M9 15.8l1 1.7h4" /></svg><span><b>By hand</b><small>Delicates</small></span></label><label><input type="radio" name="uvq04-care" /><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 9h18l-2.2 10H5.2z" /><path d="M3 9c2-1.8 4 1.8 6 0s4 1.8 6 0 4 1.8 6 0" /><circle className="f" cx="12" cy="14.5" r="1" /></svg><span><b>30 °C</b><small>Wool and silk</small></span></label><label><input type="radio" name="uvq04-care" checked={true} /><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 9h18l-2.2 10H5.2z" /><path d="M3 9c2-1.8 4 1.8 6 0s4 1.8 6 0 4 1.8 6 0" /><circle className="f" cx="10.3" cy="14.5" r="1" /><circle className="f" cx="13.7" cy="14.5" r="1" /></svg><span><b>40 °C</b><small>Colours</small></span></label><label><input type="radio" name="uvq04-care" /><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 9h18l-2.2 10H5.2z" /><path d="M3 9c2-1.8 4 1.8 6 0s4 1.8 6 0 4 1.8 6 0" /><circle className="f" cx="8.6" cy="14.5" r="1" /><circle className="f" cx="12" cy="14.5" r="1" /><circle className="f" cx="15.4" cy="14.5" r="1" /></svg><span><b>60 °C</b><small>White cotton</small></span></label><p className="mk" aria-hidden="true">Made in Portugal</p></div></fieldset>
      </div>
    </>
  );
}
```

## Prompt for AI assistants

Paste this into ChatGPT, Claude, Cursor, v0 or Lovable to adapt the block to your stack (Tailwind, Vue, Svelte…):

````text
I want to add the “Garment care label wash picker” block (Radio buttons) from AIMRAN Library to my project.

## What it is
A satin care label sewn into a seam: choose a wash temperature and its symbol gets outlined in blue stitching.

## Chosen settings
- Main color: #1f5f8b
- Secondary color: #8f96a0
- Size: 16px (from 12 to 24px)
- Speed: 1x (from 0.5 to 2x)
- Text: "Lavado"

## What I need
1. Add it to my project with the same look and animation as the reference code: same sizes, colours, radii, shadows, timings and easing.
2. It is built with plain HTML and CSS (the reference wraps it in a React component with its CSS). If my project uses something else (Vue, Svelte, Astro, plain HTML…), translate it without losing any behaviour. If I use Tailwind, turn the styles into classes; if not, keep the CSS in its own file.
3. Expose the settings above as props (or CSS variables) with those values as defaults.
4. Make it work well on phones: nothing that depends only on hover, touch targets of at least 44 px and no overflow on 320 px screens.
5. Make it look right in light and dark mode.
6. Keep it accessible: semantic HTML, roles and aria-* where needed, visible focus and keyboard support.
7. Respect prefers-reduced-motion: with reduced motion, no big animations but the same end result.

## Reference code
```tsx
import type { CSSProperties } from "react";

const css = `
.uvq04-care {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.uvq04-care legend {
  padding: 0;
  margin: 0 0 .8em;
  font-weight: 700;
  width: 100%;
  text-align: center;
}

.uvq04-care .sm {
  position: relative;
  z-index: 1;
  width: 15em;
  height: 1.3em;
  border-radius: .3em;
  background: repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px),linear-gradient(color-mix(in srgb,var(--c2),#fff 15%),color-mix(in srgb,var(--c2),#000 15%));
  box-shadow: 0 .2em .35em rgba(0,0,0,.25);
}

.uvq04-care .sm::after {
  content: "";
  position: absolute;
  left: .4em;
  right: .4em;
  top: 50%;
  border-top: 1.5px dashed rgba(255,255,255,.55);
}

.uvq04-care .lb {
  width: 11.5em;
  margin-top: -.45em;
  padding: 1.3em .8em 1em;
  box-sizing: border-box;
  border-radius: 0 0 .2em .2em;
  color: #3a3a3a;
  background: linear-gradient(100deg,transparent 18%,rgba(255,255,255,.65) 34%,transparent 50%),repeating-linear-gradient(90deg,rgba(0,0,0,.025) 0 1px,transparent 1px 2px),#f6f4ef;
  box-shadow: 0 .8em 1.6em -1em rgba(0,0,0,.5),inset 0 .5em .4em -.4em rgba(0,0,0,.18);
}

.uvq04-care .cm {
  margin: 0 0 .7em;
  text-align: center;
  font-size: .64em;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5;
  text-transform: uppercase;
}

.uvq04-care label {
  position: relative;
  display: grid;
  grid-template-columns: 1.9em 1fr;
  align-items: center;
  gap: .6em;
  margin-bottom: .25em;
  padding: .3em .45em;
  border: 1.5px dashed transparent;
  border-radius: .4em;
  cursor: pointer;
  transition: background calc(0.25s / var(--k)) cubic-bezier(.25,.1,.25,1),border-color calc(0.25s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq04-care input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.uvq04-care label svg {
  width: 1.9em;
  height: 1.9em;
  fill: none;
  stroke: #3a3a3a;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke calc(0.25s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq04-care label svg .f {
  fill: #3a3a3a;
  stroke: none;
  transition: fill calc(0.25s / var(--k)) cubic-bezier(.25,.1,.25,1);
}

.uvq04-care label span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.uvq04-care label b {
  font-size: .82em;
}

.uvq04-care label small {
  font-size: .66em;
  opacity: .65;
}

.uvq04-care label:hover {
  background: rgba(0,0,0,.04);
}

.uvq04-care label:active {
  transform: scale(.98);
}

.uvq04-care label:has(input:checked) {
  border-color: var(--c1);
  background: color-mix(in srgb,var(--c1) 9%,transparent);
  color: var(--c1);
}

.uvq04-care input:checked + svg {
  stroke: var(--c1);
  animation: uvq04-care calc(0.45s / var(--k)) cubic-bezier(.34,1.56,.64,1);
}

.uvq04-care input:checked + svg .f {
  fill: var(--c1);
}

.uvq04-care label:has(input:focus-visible) {
  outline: 2px solid #3a3a3a;
  outline-offset: 2px;
}

.uvq04-care .mk {
  margin: .6em 0 0;
  text-align: center;
  font-size: .56em;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
}

@keyframes uvq04-care {
  from {
    transform: scale(.7);
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq04-care,.uvq04-care *,.uvq04-care *::before,.uvq04-care *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}
`;

export default function RdCareLabel() {
  return (
    <>
      <style>{css}</style>
      <div
        style={{
          "--c1": "#1f5f8b",
          "--c2": "#8f96a0",
          "--s": "16px",
          "--k": "1",
          "--fg": "#1d1d1f",
          "--bg": "#f5f5f7",
        } as CSSProperties}
      >
        <fieldset className="uvq04-care"><legend>Washing</legend><div className="sm" aria-hidden="true"></div><div className="lb"><p className="cm" aria-hidden="true">92% cotton<br />8% elastane</p><label><input type="radio" name="uvq04-care" /><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 9h18l-2.2 10H5.2z" /><path d="M3 9c2-1.8 4 1.8 6 0s4 1.8 6 0 4 1.8 6 0" /><path d="M10 17.5v-3.2M12 17.5v-3.8M14 17.5v-3.2M9 15.8l1 1.7h4" /></svg><span><b>By hand</b><small>Delicates</small></span></label><label><input type="radio" name="uvq04-care" /><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 9h18l-2.2 10H5.2z" /><path d="M3 9c2-1.8 4 1.8 6 0s4 1.8 6 0 4 1.8 6 0" /><circle className="f" cx="12" cy="14.5" r="1" /></svg><span><b>30 °C</b><small>Wool and silk</small></span></label><label><input type="radio" name="uvq04-care" checked={true} /><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 9h18l-2.2 10H5.2z" /><path d="M3 9c2-1.8 4 1.8 6 0s4 1.8 6 0 4 1.8 6 0" /><circle className="f" cx="10.3" cy="14.5" r="1" /><circle className="f" cx="13.7" cy="14.5" r="1" /></svg><span><b>40 °C</b><small>Colours</small></span></label><label><input type="radio" name="uvq04-care" /><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 9h18l-2.2 10H5.2z" /><path d="M3 9c2-1.8 4 1.8 6 0s4 1.8 6 0 4 1.8 6 0" /><circle className="f" cx="8.6" cy="14.5" r="1" /><circle className="f" cx="12" cy="14.5" r="1" /><circle className="f" cx="15.4" cy="14.5" r="1" /></svg><span><b>60 °C</b><small>White cotton</small></span></label><p className="mk" aria-hidden="true">Made in Portugal</p></div></fieldset>
      </div>
    </>
  );
}
```

Give me the complete final code, ready to paste, and tell me in one line where to put it in my project.
````