textarea

Multi-line text input.

html

<label class="ta-wrap" style="--accent:#F5C2E0;">
  <span class="ta-wrap__label">Message</span>
  <textarea class="ta-el" rows="4" placeholder="Tell us what happened…"></textarea>
</label>
<style>
.ta-wrap { display: block; width: 280px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; }
.ta-wrap__label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 600; color: #241430aa; }
.ta-el { width: 100%; box-sizing: border-box; font: 14px system-ui, sans-serif; padding: 10px 12px; border-radius: 8px; border: 1.5px solid #24143035; resize: vertical; }
.ta-el:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ta-el:read-only { background: #24143008; color: #241430aa; }
</style>

tailwind

<label class="block w-[280px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] p-4 rounded-xl">
  <span class="block mb-1.5 text-xs font-semibold text-[#241430]/65">Message</span>
  <textarea rows="4" placeholder="Tell us what happened…" class="w-full box-border text-sm px-3 py-2.5 rounded-lg border-[1.5px] border-[#24143035] resize-y read-only:bg-[#24143008] read-only:text-[#241430]/65 focus-visible:outline focus-visible:outline-2" style="outline-color:#F5C2E0"></textarea>
</label>

react

export function TextareaElement({
  placeholder = "Tell us what happened…",
  rows = 4,
  accent = "#F5C2E0",
  readOnly = false,
}) {
  return (
    <label style={{ display: "block", width: 280, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, borderRadius: 12 }}>
      <span style={{ display: "block", marginBottom: 7, fontSize: 12, fontWeight: 600, color: "#241430aa" }}>Message</span>
      <textarea rows={rows} placeholder={placeholder} readOnly={readOnly}
        style={{ width: "100%", boxSizing: "border-box", font: "14px system-ui, sans-serif", padding: "10px 12px", borderRadius: 8, border: "1.5px solid #24143035", resize: "vertical", background: readOnly ? "#24143008" : "transparent", color: readOnly ? "#241430aa" : "#241430", accentColor: accent }} />
    </label>
  );
}