H
UI by hampton.io
Back to Components
Inputs

Search Form

Search input with form submission and icon.

PropsUsage ExampleVariations

Search the library

Find components, blocks, and layouts.

Try searching for 'button' or 'card'

Dependencies

  • clsx
  • tailwind-merge

Files

  • components/ui/search-form.tsx

Installation

Using shadcn CLI

npx shadcn add search-form --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge

Related Inputs Components

Address Input

Multi-field address form for street, city, region, postal code, and country.

Autocomplete Address

Address input with suggestions and structured output for street, city, state, and postal code.

Avatar Upload

Circular avatar with upload overlay, drag and drop support, and image preview.

Character Counter

Textarea with live character count, limit enforcement, and warning states.

Checkbox

A styled checkbox component with 8 style presets including modern, glassmorphism, neumorphism, brutalist, retro-mac, windows-95, flat, and skeuomorphic.

Checkbox Group

Checkbox list with optional select all toggle and indeterminate support.