Form State

Current form values/validation state.

Not yet edited

Enter a valid email address

Looks good

html

<div class="fst fst--invalid">
  <label class="fst__label">Email</label>
  <input class="fst__input" type="text" value="ada@example" style="--ok:#A8E6C1;" />
  <p class="fst__msg fst__msg--pristine">Not yet edited</p>
  <p class="fst__msg fst__msg--invalid">Enter a valid email address</p>
  <p class="fst__msg fst__msg--valid" style="color:#A8E6C1;">Looks good</p>
</div>
<style>
.fst { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 280px; box-sizing: border-box; }
.fst__label { display: block; font-size: 11px; font-weight: 600; margin-bottom: 4px; }
.fst__input { width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 6px; border: 2px solid #24143030; font-size: 13px; }
.fst--invalid .fst__input { border-color: #E8A020; }
.fst--valid .fst__input { border-color: var(--ok); }
.fst__msg { display: none; margin: 6px 0 0; font-size: 11px; color: #24143099; }
.fst--pristine .fst__msg--pristine, .fst--invalid .fst__msg--invalid, .fst--valid .fst__msg--valid { display: block; }
.fst--invalid .fst__msg--invalid { color: #E8A020; font-weight: 600; }
</style>

tailwind

<div class="fsttw fsttw--invalid font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[280px] box-border">
  <label class="block text-[11px] font-semibold mb-1">Email</label>
  <input class="fsttw__input w-full box-border py-2.5 px-2.5 rounded-md border-2 border-[#24143030] text-[13px]" type="text" value="ada@example" style="--ok:#A8E6C1;" />
  <p class="fsttw__msg fsttw__msg--pristine hidden mt-1.5 text-[11px] text-[#24143099]">Not yet edited</p>
  <p class="fsttw__msg fsttw__msg--invalid hidden mt-1.5 text-[11px] text-[#E8A020] font-semibold">Enter a valid email address</p>
  <p class="fsttw__msg fsttw__msg--valid hidden mt-1.5 text-[11px] font-semibold" style="color:#A8E6C1;">Looks good</p>
</div>
<style>
.fsttw--invalid .fsttw__input { border-color: #E8A020; }
.fsttw--valid .fsttw__input { border-color: var(--ok); }
.fsttw--pristine .fsttw__msg--pristine, .fsttw--invalid .fsttw__msg--invalid, .fsttw--valid .fsttw__msg--valid { display: block; }
</style>

react

export function FormState({
  fieldLabel = "Email",
  fieldValue = "ada@example",
  status = "invalid",
  accent = "#A8E6C1",
}) {
  const borderColor = status === "invalid" ? "#E8A020" : status === "valid" ? accent : "#24143030";
  const msg = { pristine: ["Not yet edited", "#24143099"], invalid: ["Enter a valid email address", "#E8A020"], valid: ["Looks good", accent] }[status];
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 280, boxSizing: "border-box" }}>
      <label style={{ display: "block", fontSize: 11, fontWeight: 600, marginBottom: 4 }}>{fieldLabel}</label>
      <input type="text" defaultValue={fieldValue} readOnly style={{ width: "100%", boxSizing: "border-box", padding: "9px 10px", borderRadius: 6, border: `2px solid ${borderColor}`, fontSize: 13 }} />
      <p style={{ margin: "6px 0 0", fontSize: 11, fontWeight: status === "pristine" ? 400 : 600, color: msg[1] }}>{msg[0]}</p>
    </div>
  );
}