Floating Label Input

An input component with a label that floats above the field when focused or filled. Uses a compound component pattern (FloatingLabel, FloatingLabel.Input, FloatingLabel.Label) for full styling control. Inspired by shadcn/ui Expansions .

Installation

npx shadcn@latest add https://prismaui.com/components/floating-label-input.json

Import


import { FloatingLabel } from '@/components/ui/floating-label-input';

Preview


<FloatingLabel>
  <FloatingLabel.Input id='email' type='email' />
  <FloatingLabel.Label htmlFor='email'>Email</FloatingLabel.Label>
</FloatingLabel>

Multiple Fields

Full Name

Password


<div className='flex flex-col gap-4'>
  <FloatingLabel>
    <FloatingLabel.Input id='name' />
    <FloatingLabel.Label htmlFor='name'>Full Name</FloatingLabel.Label>
  </FloatingLabel>
  <FloatingLabel>
    <FloatingLabel.Input id='email' type='email' />
    <FloatingLabel.Label htmlFor='email'>Email</FloatingLabel.Label>
  </FloatingLabel>
  <FloatingLabel>
    <FloatingLabel.Input id='password' type='password' />
    <FloatingLabel.Label htmlFor='password'>Password</FloatingLabel.Label>
  </FloatingLabel>
</div>

Custom Styling

Each sub-component accepts its own className, giving full control without extra wrapper props.

Username


<FloatingLabel>
  <FloatingLabel.Input
    id='username'
    className='rounded-full border-primary/50 px-5 focus:border-primary'
  />
  <FloatingLabel.Label htmlFor='username' className='left-3 text-primary'>
    Username
  </FloatingLabel.Label>
</FloatingLabel>

Props

`FloatingLabel` (root)

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Must contain `.Input` and `.Label`.
`className`	`string`	—	Additional CSS classes for the root wrapper.

`FloatingLabel.Input`

Prop	Type	Default	Description
`...props`	`InputHTMLAttributes`	—	All standard input props.
`className`	`string`	—	Additional CSS classes.

`FloatingLabel.Label`

Prop	Type	Default	Description
`htmlFor`	`string`	—	Matches the input `id`.
`children`	`React.ReactNode`	—	The label text.
`className`	`string`	—	Additional CSS classes.