Components

Input

Floating-label text input: the label sits where a placeholder would, then rises and shrinks once the field is focused or filled, while a 1px accent underline draws in from the left.

Work email

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add input

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Input } from "@lumora/ui/components/input";
// or from the barrel:
import { Input } from "@lumora/ui";

Props worth knowing

label is required and floats from the placeholder position on focus or value. error renders a validation message in the negative tone and wires aria-describedby. All native input props pass through. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.