- 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>
```