#FormLayout

A layout component for organizing content with flexible orientation and alignment options.

Props

PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Layout direction
align'start' | 'center' | 'end''start'Cross-axis alignment
asChildbooleanfalseRender with Slot to style a child element
...div propsComponentProps<'div'>-All native div props

Examples

<FormLayout asChild orientation="label-left" align="end">
  <label>
    <span>Email</span>
    <InputRoot type="email" placeholder="you@example.com" />
  </label>
</FormLayout>

Usage

<FormLayout asChild className="w-2xs">
  <label className="text-uk-md">
    <p>Number</p>

    <InputRoot placeholder="input"/>
  </label>
</FormLayout>

vertical

<FormLayout asChild className="w-2xs" orientation="label-left">
  <label>
    <p className="text-uk-md">Number</p>

    <InputRoot placeholder="input"/>
  </label>
</FormLayout>

vertical start

<FormLayout asChild className="w-2xs">
  <label>
    <p className="text-uk-md">Number</p>

    <InputRoot placeholder="input"/>
  </label>
</FormLayout>