SearchInput

Premium

Forms

Search input with expandable animation, loading state, and optional suggestions dropdown.

Dependencies:

framer-motion

Full

Preview

Interactive

Installation

1. Install dependencies

npm install framer-motion

2. Copy the component

Copy the source code from the Code tab above and save it to your components folder.

3. Import and use

import { SearchInput } from '@/components/SearchInput'

Input field with floating label animation, validation states, and multiple variants.

Smooth animated toggle switch with multiple sizes and label support.

Animated checkbox with spring effect, supporting indeterminate state and checkbox groups.