Floating Label Input

Material UI floating label input.

Preview

Open in

Installation

CLI

npx shadcn@latest add https://kelvinmai.io/r/floating-label-input.json

Manual

Install the following dependencies

npm install clsx tailwind-merge @radix-ui/react-label

Add a classname utility function

import { clsx, type ClassValue } from 'clsx';

import { twMerge } from 'tailwind-merge';



export const cn = (...inputs: ClassValue[]) => {

  return twMerge(clsx(inputs));

};

Copy and paste the following code into your project

components/floating-label-input.tsx
import * as React from 'react';



import { cn } from '@/lib/utils';

import { Label } from '@radix-ui/react-label';

import { Input } from '@/components/ui/input';



export const FloatingLabel: React.FC<React.ComponentProps<typeof Label>> = ({

  className,

  ...props

}) => {

  return (

    <Label

      className={cn(

        'peer-has-focus:secondary bg-background absolute start-2 top-2 z-10 origin-[0] -translate-y-4 scale-75 transform cursor-text px-2 text-sm text-gray-500 duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4',

        className,

      )}

      {...props}

    />

  );

};



export const FloatingInput: React.FC<

  React.ComponentProps<'input'> & {

    label: string;

  }

> = ({ id, label, className, ...props }) => {

  return (

    <div className='relative'>

      <Input

        id={id}

        className={cn('peer bg-background', className)}

        placeholder=' '

        {...props}

      />

      <FloatingLabel htmlFor={id}>{label}</FloatingLabel>

    </div>

  );

};

Update the import paths to match your project setup

Usage

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



export default function FloatingInputDemo() {

  return (

    <FloatingInput id='floating-label-input-demo' label='floating input' />

  );

}

API Reference

NameTypeRequiredDefaultDescription
label
string
Yes
undefined
The form label for the input.