Built-in Components
Reactaform provides a comprehensive set of built-in form components designed to handle various input types and use cases. Each component is fully typed, accessible, and customizable.
Component Library
=== "📝 Text & Input"
| Component | Type | Description | Schema |
|---|---|---|---|
| 📝 Text Input | text | Single-line text input | View |
| 📄 Multiline Text | multiline | Multi-line textarea for longer content | View |
| 🔒 Password | password | Secure password input with masking | View |
email | Email input with built-in validation | View | |
| 📱 Phone | phone | Phone number input with formatting | View |
| 🔗 URL | url | URL input with validation | View |
=== "🔢 Numbers"
| Component | Type | Description | Schema |
|---|---|---|---|
| # Integer | int | Whole number input | View |
| % Float | float | Decimal number input | View |
| 🎚️ Slider | slider | Visual range selector with drag control | View |
| 🔄 Stepper | stepper | Increment/decrement numeric input | View |
| 🔢 Integer Array | int-array | Multiple integer values | View |
| 📊 Float Array | float-array | Multiple decimal values | View |
=== "☑️ Choices"
| Component | Type | Description | Schema |
|---|---|---|---|
| ▼ Dropdown | dropdown | Single selection from a list | View |
| ⭕ Radio | radio | Radio button group for exclusive selection | View |
| ☑️ Checkbox | checkbox | Boolean yes/no toggle | View |
| 🔄 Switch | switch | Toggle switch for on/off states | View |
| ✅ Multi-Selection | multi-selection | Multiple selections from a list | View |
=== "📅 Date & Time"
| Component | Type | Description | Schema |
|---|---|---|---|
| 📅 Date | date | Calendar date picker | View |
| 🕐 Time | time | Time selection control | View |
=== "🎨 Advanced"
| Component | Type | Description | Schema |
|---|---|---|---|
| 📁 File | file | File upload and selection | View |
| 🎨 Color | color | Visual color picker | View |
| ⭐ Rating | rating | Star rating input | View |
| 📏 Unit Value | unit | Value with measurement unit | View |
=== "🎯 UI Elements"
| Component | Type | Description | Schema |
|---|---|---|---|
| ➖ Separator | separator | Visual divider for form sections | View |
!!! tip "Component Features"
- ✅ Fully Typed - Complete TypeScript support for all components
- 🎨 Customizable - Style and configure to match your design system
- ♿ Accessible - WCAG compliant with proper ARIA labels
- 🔍 Validated - Built-in validation with custom rules support