71 lines
1.2 KiB
Markdown
71 lines
1.2 KiB
Markdown
- 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>
|
|
```
|
|
|