Input Component - Flexible Styling
Default Input
With Email Icon
Large Input with Custom Styling
Minimal Style
Gradient Border
Password Component
Value: (empty)
TextArea Component - Custom Styles
Default TextArea
Large Rounded TextArea
With Validation & Counter
Auto-resize Minimal Style
Checkbox Component - Size & Style Flexibility
RadioButton - Size Variations
Value:
RadioGroup - Custom Colors
Value: Earth
RadioGroup - Button Style
Value: enterprise
RadioGroup - Pill Style
Value:
RadioGroup - Card Style
Value:
RadioGroup - With Animated Ring
Value:
Toggle Switch - Size Variations
Sizes - Flexible with Class Overrides
Notification Settings - Toggle Group
Custom Styled Toggle Group
Select Component - Flexible Styling
Default Select
Selected country: gb
Large Rounded Select
Minimal Select
Pill Style Select
ListBox Component - Advanced Select
Country Code Selector (with Flags)
Shows bottom sheet on mobile, dropdown on desktop
Selected: US
Simple String Options
Selected size: md
Custom Styled (Pill)
Selected theme: light
📱 Mobile Features:
- Bottom sheet on touch devices
- Auto-positioned dropdown on desktop
- Full keyboard navigation
- Integration with Input for country codes
OTP Input Component
Value: (empty)
Mobile Phone Input with Country Code Selector
Demonstrates ListBox integration with Input component for mobile-optimized country code selection
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
Schedule Picker - Inline Mode
Calendar-based schedule selector with day selection, time presets, and visual time grid with drag-to-select
Current value:
{}
Schedule Picker - Popover Mode
Compact trigger button that opens the picker in a bottom sheet on mobile
Current value:
{ "monday": [ { "start": "09:00", "end": "17:00" } ], "wednesday": [ { "start": "09:00", "end": "12:00" } ] }
Explore More Components
Browse other component categories