Select

Premium

Forms

Animated dropdown select with search, keyboard navigation, and custom styling.

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 { Select } from '@/components/Select'

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

Smooth animated toggle switch with multiple sizes and label support.

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