gh-vuer-ai-vuer-skill-marketplace-skills-vuer-uikit/docs/components/layout.md

• Home
• Components
• Layout

#FormLayout

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

Props

Prop Type Default Description orientation 'horizontal' | 'vertical' 'horizontal' Layout direction align 'start' | 'center' | 'end' 'start' Cross-axis alignment asChild boolean false Render with Slot to style a child element ...div props ComponentProps<'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

Number

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

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

vertical

Number

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

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

vertical start

Number

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

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