Float Input

A floating label input built on the Input and Field components for compact, accessible forms.

FloatInput is currently in Alpha, don't use in production

Email address

import { FloatInput } from '@fidely-ui/react/float-input'

export const FloatInputBasics = () => {
  return <FloatInput label="Email address" />
}

Usage

import { FloatInput } from '@fidely-ui/react'

<FloatInput />

The FloatInput combines the Input and Field.Label components to create an input with a floating label.

It accepts all props available in Input component.

Examples

Error Text

Wrap the FloatInput in Field.Root and pass the invalid prop to Field.Root, then use Field.Error to show validation feedback.

Email address

This is an error text

import { Field } from '@fidely-ui/react'
import { FloatInput } from '@fidely-ui/react/float-input'

export const FloatWithError = () => {
  return (
    <Field.Root invalid>
      <FloatInput label="Email address" />
      <Field.Error>This is an error text</Field.Error>
    </Field.Root>
  )
}

Helper Text

Use the Field.HelperText to add helper text to the field.

Email Your Name

This is a helper text

import { Field } from '@fidely-ui/react'
import { FloatInput } from '@fidely-ui/react/float-input'

export const FloatWithHelper = () => {
  return (
    <Field.Root>
      <FloatInput label="Email Your Name" />
      <Field.HelperText>This is a helper text</Field.HelperText>
    </Field.Root>
  )
}

Disable

You can use the disabled prop to disable the field.

fidelyui@example.com

import { Field } from '@fidely-ui/react'
import { FloatInput } from '@fidely-ui/react/float-input'

export const FloatWithDisabled = () => {
  return (
    <Field.Root disabled>
      <FloatInput label="fidelyui@example.com" />
    </Field.Root>
  )
}

Size

Pass the size prop to adjust both the input height and label font size.

Email address

import { FloatInput } from '@fidely-ui/react/float-input'

export const FloatWithSize = () => {
  return <FloatInput label="Email address" size={'xs'} />
}

Props

FloatInput

Prop	Type	Default	Description
`label`	`string`	—	The floating label text displayed above the input when focused or filled.
`id`	`string`	—	Please wrap your FloatInput with Field.Root.
`size`	`"2xs" \|` "xs" \| "sm" \| "md" \| `"lg" \| "md" \| "lg"` \| `"xl"` \| `"2xl"`	`"md"`	Controls the height of the input and size of the label.
`disabled`	`boolean`	`false`	Disables the input and label interaction.
`type`	`string`	`"text"`	The input type (e.g., `text`, `email`, `password`).
`value`	`string`	—	The controlled value of the input.
`onChange`	`(event: React.ChangeEvent<HTMLInputElement>) => void`	—	Callback invoked when the input value changes.
`name`	`string`	—	The name of the input field for form submission.