# Form Layout

A small wrapper that pairs a label with a control. `orientation="label-top"
` (default) stacks them; `label-left` puts the label in a column beside the
control. Pass exactly two children — `[label, control]`.

## Alignment

With `label-left`, `align` controls how the label sits against a control that's
taller than one line.

## Any control, and `asChild`

The control can be anything — input, switch, number field. With `asChild` the
layout classes land on the single child element instead of a wrapper `<div>`.
Make that child a `<label>` if you want clicking it to focus the control.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `'label-top' \| 'label-left'` | `'label-top'` | Stacked vs side-by-side. |
| `align` | `'start' \| 'center' \| 'end' \| 'baseline'` | `'center'` | Cross-axis alignment. |
| `asChild` | `boolean` | `false` | Render the single child instead of a wrapper. |
| `className` | `string` | — | Extra classes. |