Clearable Input

A text input with a one-tap way to clear it.

Default

const [value, setValue] = useState("buena mono");

<div className="relative w-64">
  <Input value={value} onChange={(e) => setValue(e.target.value)} className="pr-8" />
  {value.length > 0 && (
    <button aria-label="Clear input" onClick={() => setValue("")}>
      <X className="size-4" />
    </button>
  )}
</div>

Variants

With Label

⌘ K

With Cmdk — shows ⌘ K, then Esc once the field is dirty (Escape clears)

Disabled — clear affordance is suppressed while non-interactive

{/* With Cmdk — shows ⌘ K, then Esc when dirty */}
<div className="relative w-64">
  <Input value={value} onChange={...} onKeyDown={(e) => e.key === "Escape" && setValue("")} />
  <kbd className="absolute right-2 top-1/2 -translate-y-1/2">
    {value.length > 0 ? "Esc" : "⌘ K"}
  </kbd>
</div>

Markdown for agents: /design/clearable-input.md · spec: /design.md