Advanced Forms

Comprehensive form components with custom styling, interactions, and rich input controls.

Horizontal Form

Form layout with labels on the left and inputs on the right.

Number Input (Touchspin)

Quantity steppers with increment/decrement buttons and constraints.

Basic

0

Min 0 / Max 100

50

Step by 5

0

Searchable Select

Custom dropdown with search filtering for large option lists.

Date Picker Display

Static calendar month view with selectable dates and highlighted today.

March 2026
Su
Mo
Tu
We
Th
Fr
Sa

Color Picker

Preset color swatch grid with hex input and live preview.

Range Slider

Styled range inputs with value displays and labels.

Basic50
Price Range$0 – $250
Rating★★★☆☆
12345

File Upload / Dropzone

Drag-and-drop file upload area with progress indicators.

Drag & drop files here

or click to browse

Accepted formats: .jpg, .png, .pdf

photo-landscape.jpg2.4 MB
report-final.pdf856 KB

Radio & Checkbox Groups

Custom styled radio buttons and checkboxes with accent color for selected state.

Shipping Method

Notification Channels

Toggle Switches

Pill-shaped toggle switches with accent color when active.

Notifications
Dark Mode
Auto-save
Email Alerts
Two-factor Auth
Marketing Emails

Input Tags

Tag input with pill-style tags, removal, and keyboard entry.

ReactTypeScriptNode.js

Press Enter to add a tag. Backspace to remove the last tag.