Forms Gallery

Input controls, buttons, selectors, and form elements

Components/Forms/Advanced

OTP Input Component

Value: (empty)

Mobile Phone Input with Country Code Selector

Demonstrates ListBox integration with Input component for mobile-optimized country code selection

Phone Number*

Selected country: +1

Phone value: (empty)

Formatted for: United States (en-US)

💡 Key Features:

Real-time phone formatting as you type (e.g., (555) 123-4567)
Country-specific validation using locale rules
ListBox appears as bottom sheet on mobile devices
Flag emoji appears as button inside Input component
Fully accessible with keyboard navigation
Works with tel input type and inputMode attribute

Sliders - Comprehensive Variations

Volume

[object Object]

010

Search Radius

[object Object] miles

0 miles20 miles

Price

$[object Object]

$0$1000

Completion

NaN%

0%100%

[object Object]

Small Size

[object Object]

Large Size

[object Object]

[object Object] fl oz

0 fl oz100 fl oz

$[object Object]

$0$100

Disabled Slider

[object Object]

0100

Schedule Picker - Inline Mode

Calendar-based schedule selector with day selection, time presets, and visual time grid with drag-to-select

Your Schedule

Current value:

{}

Schedule Picker - Popover Mode

Compact trigger button that opens the picker in a bottom sheet on mobile

When are you available?

Current value:

{ "monday": [ { "start": "09:00", "end": "17:00" } ], "wednesday": [ { "start": "09:00", "end": "12:00" } ] }

Explore More Components

Browse other component categories