Inputs.

Form atoms that actually work. Type in the fields, drag the sliders, toggle the switches — every control below is a live, focusable element with real React state, not a screenshot.

34 componentsFully interactiveKeyboard reachableTailwind CSS

Buttons Inputs Badges & Chips Cards Forms Loaders Navigation Overlay Feedback Data Display Text Effects Backgrounds Effects Hero Sections Landing Blog & Content Layout Dashboard AI Interfaces E-commerce Auth Settings

Entry

Text fields

Floating labels, icon slots, prefixes, validation states and AI prompt bars. Every one is a real focusable input — click in and type.

12 variants

Email address

Stateful

Floating label

tsx

Stateful

Password toggle

tsx

28/60

Stateful

Character count

tsx

Basic

tsx

With icon

tsx

Glow focus

tsx

Underline

tsx

uidrop.dev/

Prefix / suffix

tsx

✕ Enter a valid email

Error state

tsx

✓

Success state

tsx

Opus 5

AI prompt bar

tsx

Disabled

tsx

Binary

Toggles, checks & radios

Switches, checkboxes, radio groups, card selectors and sliding segmented controls — all keyboard reachable.

8 variants

Stateful

Switch

tsx

Stateful

Switch (small)

tsx

✓Remember me

Stateful

Checkbox

tsx

monthlyyearly

Stateful

Radio group

tsx

Stateful

Card radio

tsx

Stateful

Sliding segment

tsx

Stateful

Icon switch

tsx

Indeterminate

tsx

Ranges

Sliders & pickers

Range inputs with gradient tracks, step sliders, colour swatches, star ratings and OTP boxes.

8 variants

Budget$62

Stateful

Range slider

tsx

Stateful

Step slider

tsx

Stateful

Colour picker

tsx

Stateful

Star rating

tsx

Stateful

Quantity

tsx

Select

tsx

21 Aug 2026

Date field

tsx

Stateful

OTP boxes

tsx

Composite

Uploads & search

Drag-and-drop zones, upload progress rows, tag inputs and copy-to-clipboard fields.

6 variants

⬆

Drop files here

PNG, JPG up to 10MB

Stateful

Drop zone

tsx

PDF

brand-guide.pdf

File row

tsx

AKChange

Avatar upload

tsx

⌘K

Search with ⌘K

tsx

reactui

Stateful

Tag input

tsx

Stateful

Copy field

tsx

Inputs.

Form atoms that actually work. Type in the fields, drag the sliders, toggle the switches — every control below is a live, focusable element with real React state, not a screenshot.

34 componentsFully interactiveKeyboard reachableTailwind CSS

Entry

Text fields

Floating labels, icon slots, prefixes, validation states and AI prompt bars. Every one is a real focusable input — click in and type.

12 variants

Email address

Stateful

Floating label

tsx

Stateful

Password toggle

tsx

28/60

Stateful

Character count

tsx

Basic

tsx

With icon

tsx

Glow focus

tsx

Underline

tsx

uidrop.dev/

Prefix / suffix

tsx

✕ Enter a valid email

Error state

tsx

✓

Success state

tsx

Opus 5

AI prompt bar

tsx

Disabled

tsx

Binary

Toggles, checks & radios

Switches, checkboxes, radio groups, card selectors and sliding segmented controls — all keyboard reachable.

8 variants

Stateful

Switch

tsx

Stateful

Switch (small)

tsx

✓Remember me

Stateful

Checkbox

tsx

monthlyyearly

Stateful

Radio group

tsx

Stateful

Card radio

tsx

Stateful

Sliding segment

tsx

Stateful

Icon switch

tsx

Indeterminate

tsx

Ranges

Sliders & pickers

Range inputs with gradient tracks, step sliders, colour swatches, star ratings and OTP boxes.

8 variants

Budget$62

Stateful

Range slider

tsx

Stateful

Step slider

tsx

Stateful

Colour picker

tsx

Stateful

Star rating

tsx

Stateful

Quantity

tsx

Select

tsx

21 Aug 2026

Date field

tsx

Stateful

OTP boxes

tsx

Composite

Uploads & search

Drag-and-drop zones, upload progress rows, tag inputs and copy-to-clipboard fields.

6 variants

⬆

Drop files here

PNG, JPG up to 10MB

Stateful

Drop zone

tsx

PDF

brand-guide.pdf

File row

tsx

AKChange

Avatar upload

tsx

⌘K

Search with ⌘K

tsx

reactui

Stateful

Tag input

tsx

Stateful

Copy field

tsx