Text-based input fields for collecting typed data from users.
input
Text-based input with HTML5 type support.
{
key: 'email',
type: 'input',
value: '',
label: 'Email',
required: true,
email: true,
placeholder: 'user@example.com',
props: {
type: 'email', // 'text' | 'email' | 'password' | 'number' | 'tel' | 'url'
}
}Core Properties:
placeholder: Input placeholder text (at field level, not in props)
Core Props:
type: HTML input type ('text'|'email'|'password'|'number'|'tel'|'url')
Adapter Props
| Prop | Type | Description |
|---|---|---|
fill | 'solid' | 'outline' | Ionic input fill style |
shape | 'round' | Rounded corners on the input |
labelPlacement | 'start' | 'end' | 'fixed' | 'stacked' | 'floating' | Label position relative to the input |
color | string | Ionic color palette name |
hint | string | Helper text below the field |
clearInput | boolean | Show clear button inside input |
counter | boolean | Show character counter |
textarea
Multi-line text input.
{
key: 'bio',
type: 'textarea',
value: '',
label: 'Biography',
maxLength: 500,
placeholder: 'Tell us about yourself',
props: {
rows: 4,
}
}Core Properties:
placeholder: Placeholder text (at field level, not in props)
Core Props:
rows: Number of visible text rows
Adapter Props
| Prop | Type | Description |
|---|---|---|
fill | 'solid' | 'outline' | Ionic textarea fill style |
labelPlacement | 'start' | 'end' | 'fixed' | 'stacked' | 'floating' | Label position |
autoGrow | boolean | Auto-expand textarea height |
counter | boolean | Show character counter |
hint | string | Helper text below the field |