Prompt Chip

Compact selectable prompt.

html

<span class="prompt-chip prompt-chip--filled" style="--accent:#F5C2E0;">
  <input type="checkbox" id="prompt-chip-input" class="prompt-chip__input" >
  <label for="prompt-chip-input" class="prompt-chip__label">Explain like I&#39;m five</label>
</span>
<style>
.prompt-chip { display: inline-block; font: 14px/1 system-ui, sans-serif; }
.prompt-chip__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.prompt-chip__label { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; cursor: pointer; user-select: none; border: 1.5px solid var(--accent); }
.prompt-chip--filled .prompt-chip__label { background: color-mix(in srgb, var(--accent) 22%, #FAF7F2); color: #241430; }
.prompt-chip--outline .prompt-chip__label { background: transparent; color: #241430; }
.prompt-chip__input:checked + .prompt-chip__label { background: var(--accent); color: #241430; font-weight: 600; }
.prompt-chip__input:focus-visible + .prompt-chip__label { outline: 2px solid var(--accent); outline-offset: 2px; }
.prompt-chip__label:hover { background: color-mix(in srgb, var(--accent) 32%, #FAF7F2); }
</style>

tailwind

<span class="prompt-chip-tw prompt-chip-tw--filled inline-block font-sans text-sm leading-none" style="--accent:#F5C2E0;">
  <input type="checkbox" id="prompt-chip-tw-input" class="sr-only prompt-chip-tw__input" >
  <label for="prompt-chip-tw-input" class="prompt-chip-tw__label inline-flex items-center px-3.5 py-2 rounded-full cursor-pointer select-none border-[1.5px]" style="border-color:var(--accent);">Explain like I&#39;m five</label>
</span>
<style>
.prompt-chip-tw--filled .prompt-chip-tw__label { background: color-mix(in srgb, var(--accent) 22%, #FAF7F2); color: #241430; }
.prompt-chip-tw--outline .prompt-chip-tw__label { background: transparent; color: #241430; }
.prompt-chip-tw__input:checked + .prompt-chip-tw__label { background: var(--accent); color: #241430; font-weight: 600; }
.prompt-chip-tw__input:focus-visible + .prompt-chip-tw__label { outline: 2px solid var(--accent); outline-offset: 2px; }
.prompt-chip-tw__label:hover { background: color-mix(in srgb, var(--accent) 32%, #FAF7F2); }
</style>

react

import { useId, useState } from "react";

export function PromptChip({
  label = "Explain like I'm five",
  selected = false,
  variant = "filled",
  accent = "#F5C2E0",
}) {
  const id = useId();
  const [checked, setChecked] = useState(selected);
  const baseLabel = { display: "inline-flex", alignItems: "center", padding: "8px 14px", borderRadius: 999, cursor: "pointer", userSelect: "none", border: `1.5px solid ${accent}` };
  const variantLabel = variant === "filled"
    ? { background: `color-mix(in srgb, ${accent} 22%, #FAF7F2)`, color: "#241430" }
    : { background: "transparent", color: "#241430" };
  const checkedLabel = checked ? { background: accent, color: "#241430", fontWeight: 600 } : {};
  return (
    <span style={{ display: "inline-block", font: "14px/1 system-ui, sans-serif" }}>
      <input
        type="checkbox"
        id={id}
        checked={checked}
        onChange={(e) => setChecked(e.target.checked)}
        style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }}
      />
      <label htmlFor={id} style={{ ...baseLabel, ...variantLabel, ...checkedLabel }}>{label}</label>
    </span>
  );
}