Components

Textarea

Floating-label textarea: the label rests 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.

Release notes

Type a few lines — the field grows with you, capped at five rows.

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 textarea

Import

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

app/page.tsx

import { Textarea } from "@lumora/ui/components/textarea";
// or from the barrel:
import { Textarea } from "@lumora/ui";

Props worth knowing

label floats as the placeholder and rises on focus or value, with the accent underline drawing in from the left — the multiline sibling of Input. autoGrow (default true) resizes to the content, capped by maxRows before it scrolls. error paints the message and underline in the negative tone. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.