FloatingLabel

An input component with an animated floating label that moves up and shrinks when focused or has content.

Import

import { FloatingLabel } from '@akitectio/aki-ui'

Basic Usage

Email Address

import { FloatingLabel } from '@akitectio/aki-ui'

export default function MyForm() {
  const [email, setEmail] = useState('')

  return (
    <FloatingLabel 
      label="Email Address"
      type="email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      placeholder="Enter your email"
    />
  )
}

Variants

FloatingLabel supports multiple visual style variants.

Outline

First Name

Filled

Last Name

Standard

Phone Number

// Different variants
<FloatingLabel label="First Name" variant="outline" />
<FloatingLabel label="Last Name" variant="filled" />
<FloatingLabel label="Phone Number" variant="standard" />

Sizes

FloatingLabel supports three sizes to accommodate different design needs.

Small

Small Input

Medium

Medium Input

Large

Large Input

// Different sizes
<FloatingLabel label="Small Input" size="sm" />
<FloatingLabel label="Medium Input" size="md" />
<FloatingLabel label="Large Input" size="lg" />

States

FloatingLabel supports various states including disabled and error states.

Disabled

Disabled Input

Error

Invalid Input

Please enter a valid email address

// Different states
<FloatingLabel 
  label="Disabled Input" 
  value="Cannot edit this"
  isDisabled
  placeholder="This input is disabled"
/>

<FloatingLabel 
  label="Invalid Input" 
  value="invalid@"
  isInvalid
  errorMessage="Please enter a valid email address"
  placeholder="Enter valid email"
/>

Color Schemes

Customize the color scheme of the floating label and focus states.

Blue

Blue Theme

Green

Green Theme

Red

Red Theme

Purple

Purple Theme

Gray

Gray Theme

// Different color schemes
<FloatingLabel label="Blue Theme" colorScheme="blue" />
<FloatingLabel label="Green Theme" colorScheme="green" />
<FloatingLabel label="Red Theme" colorScheme="red" />
<FloatingLabel label="Purple Theme" colorScheme="purple" />
<FloatingLabel label="Gray Theme" colorScheme="gray" />

API Reference

Name	Type	Default	Description
label	string	-	The floating label text
variant	'outline' \| 'filled' \| 'standard'	'outline'	Input variant style
size	'sm' \| 'md' \| 'lg'	'md'	Size of the input
colorScheme	'blue' \| 'green' \| 'red' \| 'purple' \| 'gray'	'blue'	Color scheme for focus states
isInvalid	boolean	false	Whether the input is invalid
isDisabled	boolean	false	Whether the input is disabled
isReadOnly	boolean	false	Whether the input is read-only
errorMessage	string	-	Error message to display
helperText	string	-	Helper text to display below input
fullWidth	boolean	false	Expand to fill container width