Floating Label Input

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.

freenew

Basic Usage

Use the <base-floating-input> component directly. It integrates with Angular Forms out of the box.

Email Address

Password

Entered Email:

HTML

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add floating-input

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-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 reference for floating-input
API	Member	Type	Default	Description
`base-floating-input`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`base-floating-input`	`label`	`string`	`'Label'`	—
`base-floating-input`	`type`	`string`	`'text'`	—