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

PropTypeDescription
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
colorstringIonic color palette name
hintstringHelper text below the field
clearInputbooleanShow clear button inside input
counterbooleanShow character counter

Ionic Ionic
Loading live example

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

PropTypeDescription
fill'solid' | 'outline'Ionic textarea fill style
labelPlacement'start' | 'end' | 'fixed' | 'stacked' | 'floating'Label position
autoGrowbooleanAuto-expand textarea height
counterbooleanShow character counter
hintstringHelper text below the field

Ionic Ionic
Loading live example