Floating ion-label how to make work with border

I just downloaded the b1 of ionic 6 and am trying to get floating labels working like the example in the blog for the material design about 3/4 down.

Does anyone have a working example?

What I can’t get working is the border around the component that looks like the example and where the label merges with the border when selected. Figure I’m doing something super simple wrong.

Code is basic:

    <ion-label position="floating">Email</ion-label>
    <ion-input ></ion-input>

Any working example would be awesome.


Hey Chris, how are you testing this?

In a web browser (chrome latest version).

Did you mean something else?

Can you try to set fill: 'outline' on the <ion-input>?

Didn’t work. Assuming I did it right, I now have this code in the blank starter app.


<ion-content >
      <ion-label position="floating">Label 1</ion-label>


ion-input {
  fill: 'outline';

not in scss in html:

<ion-content >
      <ion-label position="floating">Label 1</ion-label>
      <ion-input fill="outline"></ion-input>

Just tried and that didn’t work. No border.

Does it work for you?

It’s from the PR: feat(item): add helper text, error text, counter, shape, and fill mode by willmartindev · Pull Request #23354 · ionic-team/ionic-framework · GitHub

This PR added this functionality, are you sure you are testing in md mode?

Maybe that is the problem.

How do I test in md mode?

I’m on Windows 10 using Chrome and didn’t set a specific mode. I thought everything but iOS was md - but could be mistaken.

inspect the html and check id the input has class “ios” or “md”

md mode

<html lang="en" class="plt-mobile plt-mobileweb md hydrated" mode="md>

please post the output of ionic info

C:\IonicV6Beta>ionic info


Ionic CLI : 6.16.3
Ionic Framework : @ionic/angular 6.0.0-beta.1
@angular-devkit/build-angular : 12.1.1
@angular-devkit/schematics : 12.1.1
@angular/cli : 12.1.1
@ionic/angular-toolkit : 4.0.0


cordova-res : not installed globally
native-run : not installed globally


NodeJS : v14.17.2 (C:\Program Files\nodejs\node.exe)
npm : 6.14.13
OS : Windows 10

How does your input look at the moment?

Here is the package json:

  "name": "IonicV6Beta",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  "private": true,
  "dependencies": {
    "@angular/common": "^12.1.1",
    "@angular/core": "^12.1.1",
    "@angular/forms": "^12.1.1",
    "@angular/platform-browser": "^12.1.1",
    "@angular/platform-browser-dynamic": "^12.1.1",
    "@angular/router": "^12.1.1",
    "@ionic/angular": "6.0.0-beta.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  "devDependencies": {
    "@angular-devkit/build-angular": "^12.1.1",
    "@angular/cli": "^12.1.1",
    "@angular/compiler": "^12.1.1",
    "@angular/compiler-cli": "^12.1.1",
    "@angular/language-service": "^12.1.1",
    "@ionic/angular-toolkit": "4.0.0",
    "@ionic/cli": "^6.16.3",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.7.1",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.2.4"
  "description": "An Ionic project"

here is the screen with some text in the input box

Sorry i was wrong, the fill attribute is not on the input, it is on the item:

<ion-content >
    <ion-item fill="outline">
      <ion-label position="floating">Label 1</ion-label>
1 Like

Thank you - that works perfectly!

Question - is there a plan to have this work in iOS by the time of the final release?