An input field where the label floats above the entered text when focused or filled, providing a clean, space-saving interface based on Material Design principles.
Playground
<ply-floating-input label="Email address" type="email">Floating Input</ply-floating-input>
Use the <ply-floating-input> component directly. It integrates with Angular Forms out of the box.
Entered Email:
<ply-floating-input label="Email Address" type="email" [(ngModel)]="email"></ply-floating-input> <ply-floating-input label="Password" type="password" [(ngModel)]="password"></ply-floating-input>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add floating-input
// Paths are relative to aliases.components (default: src/app/components)
import { FloatingInputComponent } from './floating-input/floating-input.component';
@Component({
selector: 'app-floating-input-example',
imports: [
FloatingInputComponent
],
template: `...`
})
export class FloatingInputExampleComponent {}Install
npx ply-ui-cli add floating-input
Run the following command to add this component to your project:
npx ply-ui-cli add floating-input
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add floating-input
// Paths are relative to aliases.components (default: src/app/components)
import { FloatingInputComponent } from './floating-input/floating-input.component';
@Component({
selector: 'app-your-component',
imports: [
FloatingInputComponent
],
template: `...`
})
export class YourComponent {} API for floating-input — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
ply-floating-input | class | string | '' | Additional host CSS classes (merged via cn()). |
ply-floating-input | label | string | 'Label' | — |
ply-floating-input | type | string | 'text' | — |
Content