FloatingLabelTextField

A pill-shaped text input where the label floats to the top when focused or filled. Optimized for search and selection flows.

Select

Please select a value

Select

'use client';

import { FloatingLabelTextField } from '@/ui/forms/FloatingLabelTextField';

export function FloatingLabelTextFieldDemo() {
  return (
    <div className="flex flex-col gap-16 w-full max-w-[496px]">
      <FloatingLabelTextField label="Select" />

      <FloatingLabelTextField label="Select" value="First value of the list" hasDropdown />

      <FloatingLabelTextField
        label="Select"
        value="First value of the list"
        validationStatus="error"
        errorMessage="Please select a value"
        hasDropdown
      />

      <FloatingLabelTextField label="Select" disabled />
    </div>
  );
}

Installation


npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/floating-label-text-field.json

Usage

'use client';
 
import { useState } from 'react';
import { FloatingLabelTextField } from '@/ui/forms/FloatingLabelTextField';
 
export function Component() {
  const [value, setValue] = useState('');
 
  return (
    <FloatingLabelTextField
      label="Select"
      value={value}
      onChange={(_, v) => setValue(v)}
      hasDropdown
    />
  );
}

API Reference

FloatingLabelTextField

Prop	Type	Default	Description
`label`	`string`	`undefined`	The floating label text. Acts as placeholder when empty and floats to the top when focused or filled
`id`	`string`	auto-generated	The HTML id for the input element
`name`	`string`	`id`	The name attribute for the input
`value`	`Value`	`undefined`	Controlled value of the input
`onChange`	`(event: Event, value: Value) => void`	`undefined`	Callback when value changes
`formatter`	`(value: Value) => Value`	`undefined`	Function to transform the input value (e.g. uppercase)
`validationStatus`	`"default" \| "error" \| "success"`	`"default"`	Validation state — changes border colour and label colour
`errorMessage`	`string`	`undefined`	Error text shown below the field when validationStatus is "error"
`disabled`	`boolean`	`false`	Disables the input
`required`	`boolean`	`false`	Marks the field as required
`hasDropdown`	`boolean`	`false`	Displays a chevron icon on the right; rotates on focus
`icon`	`IconicNames`	`undefined`	Additional icon displayed to the right of the input
`iconType`	`IconicTypes`	`undefined`	Icon type variant for the custom icon
`placeholder`	`string`	`undefined`	Placeholder text shown inside the input when the label is floating and field is empty
`className`	`string`	`undefined`	Additional CSS classes for the outer wrapper
`dataTestId`	`string`	`undefined`	Test ID for the field container

Notes

Floating label animation: The label transitions between placeholder position (text-b3) and floated position (text-b6 font-semibold) using CSS transitions. It floats when the input is focused or has a non-empty value.
Error state: In error state the floated label turns red and the border is red. The error message appears below with an icon.
Search & selection use case: Designed for search inputs and dropdown triggers — pairs with hasDropdown for a select-like appearance.
Accessibility: The <label> is linked to the input via htmlFor/id. Error messages are announced via aria-describedby. Invalid state is conveyed with aria-invalid.
Client component: Uses React hooks (useState, useRef) and must be used in client-side contexts.

Filter Form Control

On This Page

Installation Usage API Reference FloatingLabelTextField Notes