Search Input

Search with a clear button and a ⌘K hint

Formsformsearchinputclearshortcut

⌘K

Code locked

"use client";

import { Search, X } from "lucide-react";
import { useState } from "react";

export function SearchInput() {
  const [value, setValue] = useState("");

Create a free account to copy the full source, usage snippet and AI prompt of every component.

Create free account Sign in

Free — no card required.

Related components

Email address

Floating Label Input

Forms · CSS-only floating label field

designnextjs

Tag Input

Forms · Keyboard-driven tag field

Toggle Switch

Forms · Switch with proper accessibility roles