Ionic 6 - Material Input 'Outline'

[karvanj]

Hi All, I am upgrading to Ionic 6 and struggling to find documentation on how to implement outlines in material inputs as mentioned in the Ionic Blog 6. Any one can point me in the correct direction?

Announcing Ionic 6 - Ionic Blog

[Imaginativeone]

What do you mean by “outlines”? A styling effect around the border of a form element?

[odorakel]

Hi @karvanj,

Here is an example…

                  <ion-col size="12" class="ion-margin-bottom">
                    <ion-item fill="outline" mode="md">
                      <ion-label position="stacked">Username</ion-label>
                      <ion-input
                        type="email"
                        inputmode="email"
                        autocomplete="off"
                        autocorrect="off"
                        required
                        autofocus
                        formControlName="username"
                      ></ion-input>
                    </ion-item>
                  </ion-col>

“ion-item” has to have the fill “outline” - this is actually the important thing.

Good luck,
Oliver

[ciccilleju]

just use the fill=“outline” tag

[karvanj]

@odorakel @ciccilleju Thanks both i was trying to figure out how it will work in ion-item. This makes sense.