Control

Interactive UI element allowing the user to perform an action or change a value.

html

<div class="uif-ctl-stage" data-highlight="button">
  <div class="uif-ctl-item uif-ctl-item--button"><button type="button" style="--accent:#BFD9F2;">Submit</button></div>
  <div class="uif-ctl-item uif-ctl-item--checkbox"><label><input type="checkbox" checked disabled /> Agree</label></div>
  <div class="uif-ctl-item uif-ctl-item--slider"><input type="range" min="0" max="10" value="6" disabled style="accent-color:#BFD9F2;" /></div>
  <p class="uif-ctl-caption">A control lets someone perform an action or change a value &mdash; the highlighted one is annotated below</p>
</div>
<style>
.uif-ctl-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 12px system-ui, sans-serif; color: #241430aa; display: flex; flex-direction: column; gap: 10px; }
.uif-ctl-item { padding: 8px; border-radius: 8px; border: 2px solid transparent; }
[data-highlight="button"] .uif-ctl-item--button,
[data-highlight="checkbox"] .uif-ctl-item--checkbox,
[data-highlight="slider"] .uif-ctl-item--slider { border-color: var(--accent, #241430); background: #24143008; }
.uif-ctl-item button { font: 600 13px system-ui, sans-serif; padding: 7px 14px; border-radius: 7px; border: none; background: var(--accent); color: #241430; cursor: pointer; }
.uif-ctl-caption { margin: 0; }
</style>

tailwind

<div class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-xs text-[#241430]/70 flex flex-col gap-2.5" data-highlight="button">
  <div class="tw-ctl-button p-2 rounded-lg border-2 border-transparent"><button type="button" class="font-semibold text-sm px-3.5 py-1.5 rounded-md border-0 cursor-pointer text-[#241430]" style="background:#BFD9F2;">Submit</button></div>
  <div class="tw-ctl-checkbox p-2 rounded-lg border-2 border-transparent"><label><input type="checkbox" checked disabled /> Agree</label></div>
  <div class="tw-ctl-slider p-2 rounded-lg border-2 border-transparent"><input type="range" min="0" max="10" value="6" disabled style="accent-color:#BFD9F2;" /></div>
  <p class="m-0">A control lets someone perform an action or change a value &mdash; the highlighted one is annotated below</p>
</div>
<style>
[data-highlight="button"] .tw-ctl-button,
[data-highlight="checkbox"] .tw-ctl-checkbox,
[data-highlight="slider"] .tw-ctl-slider { border-color: #241430; background: #24143008; }
</style>

react

export function Control({
  highlight = "button",
  label = "Submit",
  accent = "#BFD9F2",
}) {
  const box = (key) => ({ padding: 8, borderRadius: 8, border: highlight === key ? "2px solid #241430" : "2px solid transparent", background: highlight === key ? "#24143008" : "transparent" });
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 12, color: "#241430aa", display: "flex", flexDirection: "column", gap: 10 }}>
      <div style={box("button")}><button type="button" style={{ fontWeight: 600, fontSize: 13, padding: "7px 14px", borderRadius: 7, border: "none", background: accent, color: "#241430", cursor: "pointer" }}>{label}</button></div>
      <div style={box("checkbox")}><label><input type="checkbox" checked readOnly disabled /> Agree</label></div>
      <div style={box("slider")}><input type="range" min="0" max="10" defaultValue={6} disabled style={{ accentColor: accent }} /></div>
      <p style={{ margin: 0 }}>A control lets someone perform an action or change a value &mdash; the highlighted one is annotated below</p>
    </div>
  );
}