/custom-ionic-form-input-components

Learn how to create custom Ionic form inputs to use in your Ionic Angular apps

Primary LanguageTypeScript

Custom Ionic Form Input Components

Learn how to create custom Ionic form inputs to use in your Ionic Angular apps.

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.

This repo is part of an Ionic tutorial where we explain how to create custom ionic form input components using Ionic and Angular. This tutorial covers both styling and functionality.

The components you can find in this repo are:

  • rating component
  • show/hide password component
  • a component to increase/decrease a number

Demo

Install this Ionic Form Inputs Demo App

npm install

Browse the app

ionic serve

Get a premium Ionic Starter App

Did you know that we recently released Ionic Full Starter App? It's an Ionic Angular template that you can use to jump start your Ionic app development and save yourself hundreds of hours of design and development.