Lucent UI
← ActionBarFormLayoutSearchFilterBar →
✦ LLM-ready

FormLayout

pattern

Form layout composed from Card, Stack, Row, Text, Input, Textarea, Select, Divider, and Button. Stacked form with section grouping, side-by-side fields using Row, dividers between sections, and a submit/cancel footer.

"Create a FormLayout using lucent-ui: Card elevated wrapping a Stack form with Input fields, side-by-side Row fields, Textarea, Select, Dividers for section breaks, and a submit/cancel Button footer."

Usage

React / JSX
import { Card, Stack, Row, Text, Input, Textarea, Select, DatePicker, Divider, Button } from 'lucent-ui'

<FormLayout Card variant="elevated" Stack as="form" />

Installation

pnpm add lucent-ui

API Reference

FormLayout props — * required

PropTypeDefaultDescription
Card variant"ghost" | "outline" | "filled" | "elevated""elevated"Elevation level of the form card.
Stack as"form" | "div""form"Render as a form element for native submission.
Input labelstring—Field label.
Input placeholderstring—Placeholder text.