Float label input

Pro

A text field whose label sits inside it while it is empty and rises to its top on focus or once it is filled. The label is always visible and always the field's name (a real <label for>), never a placeholder: a placeholder you pass shows only once the label has risen, as an example of the value ("name@company.com"). Takes Input's props, so it goes inside a Field like any input; give it label there too or leave Field's label for a heading.

Right to left, the label sits at the right, by logical insets.

Markdown

Version 5.2.0· other versions

This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).

Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0, 2.2.0, 2.3.0, 2.4.0, 2.5.0, 2.5.1, 2.6.0, 2.6.1, 2.6.2, 2.7.0, 2.8.0, 2.9.0, 2.10.0, 3.0.0, 4.0.0, 4.0.1, 4.0.2, 4.1.0, 4.2.0 and 4.3.0: the page came later, or had another name then.

Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/float-label-input

Brings in: input, merge-refs, motion, tokens, utils

Usage

TSX · The example above

"use client"

import * as React from "react"
import { FloatLabelInput } from "@/components/candor/ui/float-label-input"

// The label sits inside the empty field and rises on focus or once filled; it is always the field's name. The
// placeholder is an example of the value and shows only once the label is up.
export default function Example() {
  const [email, setEmail] = React.useState("")
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <FloatLabelInput label="Work email" type="email" autoComplete="email" placeholder="name@company.com" value={email} onChange={(e) => setEmail(e.target.value)} />
      <FloatLabelInput label="Team" defaultValue="Customer success" />
    </div>
  )
}

<FloatLabelInput>

Prop	Type	Default	Description
labelrequired	`string`	—	The field's name, shown inside it while empty and above its value once focused or filled. Required: it is the label.
placeholder	`string \| undefined`	—	An example of the value, shown only once the label has risen (never in place of the label).

Also takes the props of Omit<React.ComponentProps<typeof Input>, "children">.

Motion

Moment	Family	What it does
label	move	The label rises to the field's top on focus or once it is filled, and drops back when the field is left empty; one filled at the first draw starts up, with nothing moving.

Set with --cd-motion-float-label-input-<moment>-* in your brand file; the families are in the design reference.