Default

Normal resting state.

html

<div class="def-demo" style="--accent:#BFD9F2;">
  <label class="def-field">
    <span class="def-field__label">Display name</span>
    <input class="def-field__input" type="text" value="Priya Nair">
    <span class="def-field__tag">Default — resting, untouched, no state applied</span>
  </label>
  
  <div class="def-demo__row">
    <input class="def-field__input def-field__input--focus" type="text" value="Focused" readonly>
    <input class="def-field__input" type="text" value="Disabled" disabled>
  </div>
  
</div>
<style>
.def-demo { width: 300px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; }
.def-field { display: block; }
.def-field__label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: #241430aa; }
.def-field__input { width: 100%; box-sizing: border-box; font: 14px system-ui, sans-serif; padding: 9px 11px; border-radius: 8px; border: 1.5px solid #24143030; background: #fff; color: #241430; margin-bottom: 6px; }
.def-field__tag { display: block; font-size: 10px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.def-demo__row { display: flex; gap: 8px; margin-top: 10px; }
.def-field__input--focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.def-field__input:disabled { opacity: .5; }
</style>

tailwind

<div class="w-[300px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] p-[18px] rounded-xl">
  <label class="block">
    <span class="block mb-1.5 text-xs font-semibold text-[#241430]/65">Display name</span>
    <input type="text" value="Priya Nair" class="w-full box-border text-sm px-2.5 py-2 rounded-lg border-[1.5px] border-[#24143030] bg-white text-[#241430] mb-1.5">
    <span class="block text-[10px] font-bold uppercase tracking-wide" style="color:#BFD9F2">Default — resting, untouched, no state applied</span>
  </label>
  
  <div class="flex gap-2 mt-2.5">
    <input type="text" value="Focused" readonly class="w-full box-border text-sm px-2.5 py-2 rounded-lg border-[1.5px] outline outline-2 outline-offset-1" style="outline-color:#BFD9F2">
    <input type="text" value="Disabled" disabled class="w-full box-border text-sm px-2.5 py-2 rounded-lg border-[1.5px] border-[#24143030] opacity-50">
  </div>
  
</div>

react

export function DefaultState({
  label = "Display name",
  value = "Priya Nair",
  accent = "#BFD9F2",
  showOthers = true,
}) {
  const input = { width: "100%", boxSizing: "border-box", font: "14px system-ui, sans-serif", padding: "9px 11px", borderRadius: 8, border: "1.5px solid #24143030", background: "#fff", color: "#241430", marginBottom: 6 };
  return (
    <div style={{ width: 300, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12 }}>
      <label style={{ display: "block" }}>
        <span style={{ display: "block", marginBottom: 6, fontSize: 12, fontWeight: 600, color: "#241430aa" }}>{label}</span>
        <input type="text" defaultValue={value} style={input} />
        <span style={{ display: "block", fontSize: 10, color: accent, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em" }}>Default — resting, untouched, no state applied</span>
      </label>
      {showOthers && (
        <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
          <input readOnly defaultValue="Focused" style={{ ...input, outline: `2px solid ${accent}`, marginBottom: 0 }} />
          <input disabled defaultValue="Disabled" style={{ ...input, opacity: 0.5, marginBottom: 0 }} />
        </div>
      )}
    </div>
  );
}