FloatLabel

The FloatLabel component creates form inputs with animated floating labels that move out of the way when the input is focused or has a value. This provides a modern, space-efficient design while maintaining clear labeling for improved user experience.

Examples

Basic Usage

Username

<FloatLabel label="Username">
  <TextInput name="username" />
</FloatLabel>

With Different Input Types

Password

Message

Country

<FloatLabel label="Email">
  <TextInput type="email" name="email" />
</FloatLabel>

<FloatLabel label="Password">
  <TextInput type="password" name="password" />
</FloatLabel>

<FloatLabel label="Message">
  <Textarea name="message" rows={3} />
</FloatLabel>

<FloatLabel label="Country">
  <Select 
    name="country"
    options={[
      { label: 'United States', value: 'us' },
      { label: 'Canada', value: 'ca' },
      { label: 'United Kingdom', value: 'uk' }
    ]}
  />
</FloatLabel>

Required Field

<FloatLabel label="Email" required={true}>
  <TextInput type="email" name="email" required={true} />
</FloatLabel>

With Error Message

Please enter a valid email address

<FloatLabel 
  label="Email" 
  error="Please enter a valid email address"
>
  <TextInput type="email" name="email" />
</FloatLabel>

With Help Text

Password

Password must be at least 8 characters long

<FloatLabel 
  label="Password" 
  helpText="Password must be at least 8 characters long"
>
  <TextInput type="password" name="password" />
</FloatLabel>

Disabled State

Username

<FloatLabel label="Username" disabled={true}>
  <TextInput name="username" disabled={true} />
</FloatLabel>

With Initial Value

Username

<FloatLabel label="Username">
  <TextInput name="username" value="johndoe" />
</FloatLabel>

Props

Prop	Type	Default	Description
`label`	`string`	Required	Label text for the input
`required`	`boolean`	`false`	Whether the input is required (adds an asterisk)
`disabled`	`boolean`	`false`	Whether the input is disabled
`error`	`string`	Required	Error message to display below the input
`helpText`	`string`	Required	Help text to display below the input (not shown when there is an error)
`id`	`string`	`auto-generated`	HTML id for accessibility
`class`	`string`	`''`	Additional CSS classes

Slots

Name	Description
default	The input component to wrap with the floating label

Accessibility

The FloatLabel component follows accessibility best practices:

Associates labels with inputs using proper for attributes
Maintains visible labels at all times
Properly indicates required fields with both visual and screen reader cues
Error messages are announced to screen readers using role="alert"
Preserves the accessibility features of the wrapped input components

Best Practices

Use clear, concise labels that describe the input's purpose
Keep labels short to avoid overflow when floating
Ensure error messages are descriptive and actionable
Use help text to provide additional context or requirements
Maintain consistent styling across your form by using FloatLabel for all inputs

Form Integration

The FloatLabel component works with the Form component for validation and submission:

<Form onSubmit={handleSubmit}>
  <FloatLabel label="Email" required={true}>
    <TextInput 
      type="email"
      name="email"
      required={true}
    />
  </FloatLabel>
  
  <FloatLabel label="Password" required={true}>
    <TextInput 
      type="password"
      name="password"
      required={true}
    />
  </FloatLabel>
  
  <Button type="submit">Sign In</Button>
</Form>