Ionic CSS - Forms

Ionic forms are mostly used for interaction with users and collecting needed info. This chapter will cover various text input forms and in our subsequent chapters, we will explain how to use other form elements using the Ionic framework.

 

Input (ion-input)

The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML input, but works great on desktop devices and integrates with the keyboard on mobile devices.

 

<!-- Default Input -->
<ion-input></ion-input>

<!-- Input with value -->
<ion-input value="custom"></ion-input>

<!-- Input with placeholder -->
<ion-input placeholder="Enter Input"></ion-input>

<!-- Input with clear button when there is a value -->
<ion-input clearInput value="clear me"></ion-input>

<!-- Number type input -->
<ion-input type="number" value="333"></ion-input>

<!-- Disabled input -->
<ion-input value="Disabled" disabled></ion-input>

<!-- Readonly input -->
<ion-input value="Readonly" readonly></ion-input>

<!-- Inputs with labels -->
<ion-item>
  <ion-label>Default Label</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item>
  <ion-label position="floating">Floating Label</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item>
  <ion-label position="fixed">Fixed Label</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item>
  <ion-label position="stacked">Stacked Label</ion-label>
  <ion-input></ion-input>
</ion-item>

 

Properties

  • autocapitalize
    • Description: Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
    • Attribute: autocapitalize
    • Type: string
    • Default: 'none'
  • autofocus
    • Description: This Boolean attribute lets you specify that a form control should have input focus when the page loads.
    • Attribute: autofocus
    • Type: boolean
    • Default: false
  • clearOnEdit
    • Description: If true, the value will be cleared after focus upon edit. Defaults to true when type is "password", false for all other types.
    • Attribute: clear-on-edit
    • Type: boolean
    • Default: false
  • color
    • Description: The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". 
    • Attribute: color
    • Type: string | undefined
  • cols
    • Description: The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
    • Attribute: cols
    • Type: number | undefined
  • debounce
    • Description: Set the amount of time, in milliseconds, to wait to trigger the ionChange event after each keystroke.
    • Attribute: debounce
    • Type: number
    • Default: 0
  • disabled
    • Description: If true, the user cannot interact with the textarea.
    • Attribute: disabled
    • Type: boolean
    • Default: false
  • maxlength
    • Description: If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters that the user can enter.
    • Attribute: maxlength
    • Type: number | undefined
  • minlength
    • Description: If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters that the user can enter.
    • Attribute: minlength
    • Type: number | undefined
  • mode
    • Description: The mode determines which platform styles to use.
    • Attribute: mode
    • Type: "ios" | "md"
  • name
    • Description: The name of the control, which is submitted with the form data.
    • Attribute: name
    • Type: string
    • Default: this.inputId
  • placeholder
    • Description: Instructional text that shows before the input has a value.
    • Attribute: placeholder
    • Type: null | string | undefined
  • readonly
    • Description: If true, the user cannot modify the value.
    • Attribute: readonly
    • Type: boolean
    • Default: false
  • required
    • Description: If true, the user must fill in a value before submitting a form.
    • Attribute: required
    • Type: boolean
    • Default: false
  • rows
    • Description: The number of visible text lines for the control.
    • Attribute: rows
    • Type: number | undefined
  • spellcheck
    • Description: If true, the element will have its spelling and grammar checked.
    • Attribute: spellcheck
    • Type: boolean
    • Default: false
  • value
    • Description: The value of the textarea.
    • Attribute: value
    • Type: null | string | undefined
    • Default: ''
  • wrap
    • Description: Indicates how the control wraps text.
    • Attribute: wrap
    • Type: "hard" | "off" | "soft" | undefined

 

Event

  • ionBlur - Emitted when the input loses focus.
  • ionChange - Emitted when the input value has changed.
  • ionFocus - Emitted when the input has focus.
  • ionInput - Emitted when a keyboard input ocurred.

 

Methods

  • getInputElement 
    • Description: Returns the native <textarea> element used under the hood.
    • Signature: getInputElement() => Promise<HTMLTextAreaElement>
  • setFocus
    • Description: Sets focus on the specified ion-textarea. Use this method instead of the global input.focus().
    • Signature: setFocus() => void

Textarea (ion-textarea)

The textarea component is used for multi-line text input. A native textarea element is rendered inside of the component. The user experience and interactivity of the textarea component are improved by having control over the native textarea.

 

<!-- Default textarea -->
<ion-textarea></ion-textarea>

<!-- Textarea in an item with a placeholder -->
<ion-item>
  <ion-textarea placeholder="Enter more information here..."></ion-textarea>
</ion-item>

<!-- Textarea in an item with a floating label -->
<ion-item>
  <ion-label position="floating">Description</ion-label>
  <ion-textarea></ion-textarea>
</ion-item>

<!-- Disabled and readonly textarea in an item with a stacked label -->
<ion-item>
  <ion-label position="stacked">Summary</ion-label>
  <ion-textarea
    disabled
    readonly
    value="Ionic enables developers to build performant, high-quality mobile apps.">
  </ion-textarea>
</ion-item>

<!-- Textarea that clears the value on edit -->
<ion-item>
  <ion-label>Comment</ion-label>
  <ion-textarea clearOnEdit="true"></ion-textarea>
</ion-item>

<!-- Textarea with custom number of rows and cols -->
<ion-item>
  <ion-label>Notes</ion-label>
  <ion-textarea rows="6" cols="20" placeholder="Enter any notes here..."></ion-textarea>
</ion-item>

 

Properties

  • autocapitalize
    • Description: Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
    • Attribute: autocapitalize
    • Type: string
    • Default: 'none'
  • autofocus
    • Description: This Boolean attribute lets you specify that a form control should have input focus when the page loads.
    • Attribute: autofocus
    • Type: boolean
    • Default: false
  • clearOnEdit
    • Description: If true, the value will be cleared after focus upon edit. Defaults to true when type is "password", false for all other types.
    • Attribute: clear-on-edit
    • Type: boolean
    • Default: false
  • color
    • Description: The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". 
    • Attribute: color
    • Type: string | undefined
  • cols
    • Description: The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
    • Attribute: cols
    • Type: number | undefined
  • debounce
    • Description: Set the amount of time, in milliseconds, to wait to trigger the ionChange event after each keystroke.
    • Attribute: debounce
    • Type: number
    • Default: 0
  • disabled
    • Description: If true, the user cannot interact with the textarea.
    • Attribute: disabled
    • Type: boolean
    • Default: false
  • maxlength
    • Description: If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters that the user can enter.
    • Attribute: maxlength
    • Type: number | undefined
  • minlength
    • Description: If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters that the user can enter.
    • Attribute: minlength
    • Type: number | undefined
  • mode
    • Description: The mode determines which platform styles to use.
    • Attribute: mode
    • Type: "ios" | "md"
  • name
    • Description: The name of the control, which is submitted with the form data.
    • Attribute: name
    • Type: string
    • Default: this.inputId
  • placeholder
    • Description: Instructional text that shows before the input has a value.
    • Attribute: placeholder
    • Type: null | string | undefined
  • readonly
    • Description: If true, the user cannot modify the value.
    • Attribute: readonly
    • Type: boolean
    • Default: false
  • required
    • Description: If true, the user must fill in a value before submitting a form.
    • Attribute: required
    • Type: boolean
    • Default: false
  • rows
    • Description: The number of visible text lines for the control.
    • Attribute: rows
    • Type: number | undefined
  • spellcheck
    • Description: If true, the element will have its spelling and grammar checked.
    • Attribute: spellcheck
    • Type: boolean
    • Default: false
  • value
    • Description: The value of the textarea.
    • Attribute: value
    • Type: null | string | undefined
    • Default: ''
  • wrap
    • Description: Indicates how the control wraps text.
    • Attribute: wrap
    • Type: "hard" | "off" | "soft" | undefined

 

Event

  • ionBlur - Emitted when the input loses focus.
  • ionChange - Emitted when the input value has changed.
  • ionFocus - Emitted when the input has focus.
  • ionInput - Emitted when a keyboard input ocurred.

 

Methods

  • getInputElement 
    • Description: Returns the native <textarea> element used under the hood.
    • Signature: getInputElement() => Promise<HTMLTextAreaElement>
  • setFocus
    • Description: Sets focus on the specified ion-textarea. Use this method instead of the global input.focus().
    • Signature: setFocus() => void

 

Checkbox (ion-checkbox)

Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the checked property. They can also be checked programmatically by setting the checked property.

 

<!-- Default Checkbox -->
<ion-checkbox></ion-checkbox>

<!-- Disabled Checkbox -->
<ion-checkbox disabled="true"></ion-checkbox>

<!-- Checked Checkbox -->
<ion-checkbox checked="true"></ion-checkbox>

<!-- Checkbox Colors -->
<ion-checkbox color="primary"></ion-checkbox>
<ion-checkbox color="secondary"></ion-checkbox>
<ion-checkbox color="danger"></ion-checkbox>
<ion-checkbox color="light"></ion-checkbox>
<ion-checkbox color="dark"></ion-checkbox>

 

Properties

  • checked
    • Description: If true, the checkbox is selected.
    • Attribute: checked
    • Type: boolean
    • Default: false
  • color
    • Description: The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
    • Attribute: color
    • Type: string | undefined
  • disabled
    • Description: If true, the user cannot interact with the checkbox.
    • Attribute: disabled
    • Type: boolean
    • Default: false
  • indeterminate
    • Description: If true, the checkbox will visually appear as indeterminate.
      • Attribute: indeterminate 
    • Type: boolean
    • Default: false
  • mode
    • Description: The mode determines which platform styles to use.
    • Attribute: mode
    • Type: "ios" | "md"
  • name
    • Description: The name of the control, which is submitted with the form data.
    • Attribute: name
    • Type: string
    • Default: this.inputId
  • value
    • Description: The value of the textarea.
    • Attribute: value
    • Type: null | string | undefined
    • Default: ''

Events

  • ionBlur - Emitted when the toggle loses focus.
  • ionChange - Emitted when the checked property has changed.
  • ionFocus - Emitted when the toggle has focus.

 

Radio (ion-radio)

Radios are generally used as a set of related options inside of a group, but they can also be used alone. Pressing on a radio will check it. They can also be checked programmatically by setting the checked property.

 

<ion-list>
  <ion-radio-group>
    <ion-list-header>
      <ion-label>Name</ion-label>
    </ion-list-header>

    <ion-item>
      <ion-label>Biff</ion-label>
      <ion-radio slot="start" value="biff" checked></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Griff</ion-label>
      <ion-radio slot="start" value="griff"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Buford</ion-label>
      <ion-radio slot="start" value="buford"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>

 

Properties

  • checked
    • Description: If true, the checkbox is selected.
    • Attribute: checked
    • Type: boolean
    • Default: false
  • color
    • Description: The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
    • Attribute: color
    • Type: string | undefined
  • disabled
    • Description: If true, the user cannot interact with the checkbox.
    • Attribute: disabled
    • Type: boolean
    • Default: false
  • mode
    • Description: The mode determines which platform styles to use.
    • Attribute: mode
    • Type: "ios" | "md"
  • name
    • Description: The name of the control, which is submitted with the form data.
    • Attribute: name
    • Type: string
    • Default: this.inputId
  • value
    • Description: The value of the textarea.
    • Attribute: value
    • Type: null | string | undefined
    • Default: ''

Events

  • ionBlur - Emitted when the radio button loses focus.
  • ionFocus - Emitted when the radio button has focus.
  • ionSelect - Emitted when the radio button is selected.