Custom Ionic Form Input Components

We love writing about Ionic forms, in fact one of our most popular blog posts is about using Forms in Ionic apps. In that post you can learn everything about adding angular forms to an Ionic app such as validations, error messages, UX best practices, accessibility, different types of inputs and much more.

Ionic offers a set of controls or components that can be used inside a form such as: inputs, selects, searchbar, checkboxes, radio buttons, ranges, among others. Each of these components has its own css custom properties and css shadow parts that can be used for customization.

Besides the components provided by Ionic, we can get creative and build our own custom and reusable components. In this post we will go through some components we built at IonicThemes. By clicking the GET THE CODE button from this page, you can download all the source code of these examples for free.

Before getting into these custom components, I want to add a few words about how Ionic UI Components are built and customized.

Ionic UI Components are crafted as Web Components enabling encapsulation and allowing them to be portable and easily reused.

Web Components are a set of different technologies that enable you to build custom reusable elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.

Utilizing Web Components, you can make nearly anything that can be done with HTML, CSS and JavaScript. You can build convenient components that can be effortlessly reused without fear of code collisions.

Because Ionic Components are built as web components, we can use them in any project. For example, the other day I was building an app with vanilla javascript and I was able to add some Ionic UI Components very easily by just adding a reference to the Ionic library.

Ionic Components are not tied to any javascript framework. However, in this tutorial we use Angular in conjunction with Ionic to give the components some kind of functionality. Well, enough talking about theory, let’s go straight to the components!

For this post we are going to use Angular to add functionality to our Ionic forms. Angular allows us to update form inputs, to subscribe to the input changes, to set a disabled state, to get the current value, to define validations, and more.

Since in this tutorial we are building custom components, we need to have a way to tell Angular how our component should behave. This is what the ControlValueAccessor is for. It defines an interface that acts as a bridge between the Angular forms API and a native element in the DOM.

When creating a custom Angular Input using the ControlValueAccessor, we need to implement the following functions:

interface ControlValueAccessor {
  writeValue(obj: any): void
  registerOnChange(fn: any): void
  registerOnTouched(fn: any): void
  setDisabledState(isDisabled: boolean)?: void
}

I’m mentioning this because some of the examples we created for this post implement the ControlValueAccessor so if you get to see their code it’s important that you understand what this class is about.

Ionic Show/hide password

We use this component in all authentication forms because it provides a better UX, especially for mobile devices. The purpose of this component is to allow the user to verify if they entered the password correctly.

You can create this component with Ionic and Angular in three simple steps:

Step 1 — Create an Angular component

1. Add a ContentChild IonInput.
2. Add a toggle method that will be triggered when clicking the eye icon. This method will switch between showing the password text and the dots.
3. Define a showPassword boolean var.

import { Component, ContentChild } from '@angular/core';
import { IonInput } from '@ionic/angular';

@Component({
  selector: 'app-show-hide-password',
  templateUrl: './show-hide-password.component.html',
  styleUrls: ['./show-hide-password.component.scss']
})
export class ShowHidePasswordComponent {
showPassword = false;

@ContentChild(IonInput) input: IonInput;

constructor() {}

toggleShow() {
    this.showPassword = !this.showPassword;
    this.input.type = this.showPassword ? 'text' : 'password';
  }
}

Step 2 — Add the html markup for the component

1. Create an anchor with the toggle method defined in step 1, binded to the click event.
2. Change the icon between eye-open and eye-closed depending on the showPassword boolean var value.

<ng-content></ng-content>
<a class="type-toggle" (click)="toggleShow()">
   <ion-icon class="show-option" [hidden]="showPassword" name="eye-off-outline"></ion-icon>
   <ion-icon class="hide-option" [hidden]="!showPassword" name="eye-outline"></ion-icon>
</a>

Step 3 — Add the Show / Hide password component to an input

Just use the component with a <ion-input> as a content child.

<ion-item>
  <app-show-hide-password>
      <ion-input type="password" placeholder="Password" formControlName="password"></ion-input>
  </app-show-hide-password>
</ion-item>

You can add some styles to this component to make it look nice and shiny. Feel free to grab the styles we built for the demo app included in this tutorial.

As you can see from the code, this component doesn’t implement the Angular ControlValueAccessor. This component just adds some styles and a bit of logic to a regular input.

Increase/Decrease Input component

This component is super useful to select amounts. For example, if you are building a booking app, you could use this component for the guests number.

In order to create this input component we make use of the ControlValueAccessor mentioned before. Make sure to check the code and let us know if you have any questions about the implementation.

This counter component has a lot of styles that you can customize so make sure to have a look at them. If you add this component into a form, you would probably need to add some validations like max and min values. In our Ionic Starter Template we have a specific page using this component and others inside a form with validations and error messages.

Ionic Custom checkboxes

These checkboxes provide a very visual way to select options. They are built using the ion-checkbox component. We explain the process of building this component in the tutorial How to build any UI with Ionic.

Ionic Custom Radio Groups

The following component is built using the ion-radio and ion-radio-group UI components. The difference between this component and the previous one is that Radio buttons only allow one value to be selected.

Ionic Rating Component

We also created a rating input component that can be used as an Angular form control. This component has a custom behaviour different from the basic inputs provided by Angular so in order to let Angular know how this input should behave, we implemented the ControlValueAccessor interface.

This component can be used both as an input or as a read only component. It has some css properties that you can customize to change the colors and sizes and also, you can use the icon of your choice.

Ionic Tags

Tags can be implemented as radio buttons or checkboxes, it depends if you want to allow multiple selection or just one.

Below you can find different user interfaces we built using this component. The following components can be found in Ionic Full Starter App Template.

Ionic Color chooser

This color chooser Ionic component is also built using the ion-radio and the ion-radio-group components. Basically it’s similar to the Tag component but with different styles.

As you can see in the examples from above, we presented two types of custom components. On one side we have the custom inputs that need to implement the Angular ControlValueAccessor interface, and on the other side we have regular angular and ionic inputs with custom styles and added functionalities.

I recently wrote another blog post where I explain how you can How to build any UI with Ionic by composing different components and playing with their styles. Ionic components are super flexible, and Angular (or your javascript preferred framework) allows you to give the component custom functionalities.

These examples are just components related to forms and inputs but in Ionic Full Starter App you can find lots of custom components built with Ionic and Angular that you can use and customize to create your own apps.

Is there any other form component you would like us to add to this post? Let us know in the comments below.