iOS 18 Style Input Components Demo
Comprehensive form components with animations, validation, and react-hook-form integration
Pristine
Invalid
Errors: 0
Features Demonstrated:
iOS 18-style animations and design
React Hook Form integration with Controller
Real-time validation and form state tracking
Haptic feedback support (mobile devices)
Complete dark mode support
Comprehensive accessibility features
TypeScript support with full type safety
Responsive design for all screen sizes
Available Components:
InputText - Text inputs with masking & suggestions
InputNumber - Number inputs with steppers & formatting
InputSelect - Dropdown with search & grouping
InputMultiSelect - Multi-selection with chips
InputTextArea - Auto-resize with character count
InputCheckbox - iOS-style toggles & switches
InputRadio - Radio groups with descriptions
InputDate - Date/time pickers with native support
InputColor - Color picker with palette
Usage Example:
// Import from the Input components
import { InputText, InputNumber, InputSelect } from '@/components/ui/Input';
// Use with react-hook-form
const { register, control } = useForm();
// Simple usage with register
<InputText
label="Email"
type="email"
register={register('email', { required: 'Email is required' })}
placeholder="Enter your email"
clearable
/>
// Advanced usage with Controller
<Controller
name="skills"
control={control}
render={({ field }) => (
<InputMultiSelect
label="Skills"
options={skillOptions}
value={field.value}
onChange={field.onChange}
searchable
clearable
/>
)}
/>