Horizontal form
A layout with labels on the left and fields on the right. On settings and detail screens it makes the labels easy to scan in a single column; on small screens the labels still drop above the fields.
Basic usage
Split each row into two columns with grid sm:grid-cols-[10rem_1fr] and use the fields without label. Since you write the label yourself, match its for value to the field's id; if not given, acun:input takes its id from name.
<acun:card title="Product details">
<form class="space-y-4">
<div class="grid items-center gap-2 sm:grid-cols-[10rem_1fr]">
<label for="product_name" class="text-sm font-medium text-gray-700 dark:text-zinc-300">Product name</label>
<acun:input name="product_name" value="Wireless headphones" />
</div>
<div class="grid items-center gap-2 sm:grid-cols-[10rem_1fr]">
<label for="product_sku" class="text-sm font-medium text-gray-700 dark:text-zinc-300">SKU</label>
<acun:input name="product_sku" value="WHP-02" />
</div>
<div class="grid items-center gap-2 sm:grid-cols-[10rem_1fr]">
<label for="product_category" class="text-sm font-medium text-gray-700 dark:text-zinc-300">Category</label>
<acun:select name="product_category" :options="['1' => 'Electronics', '2' => 'Accessories']" />
</div>
<div class="grid gap-2 sm:grid-cols-[10rem_1fr]">
<span></span>
<div class="flex gap-2"><acun:button type="submit">Save</acun:button><acun:button variant="white">Cancel</acun:button></div>
</div>
</form>
</acun:card>| Prop | Values |
|---|---|
sm:grid-cols-[10rem_1fr] | Width of the label column |
for / name | Links the label to the field |
Multi-line fields and options
For tall fields such as a text area or a list of switches, align the row to the top with items-start and give the label sm:pt-2.5; the label then lines up with the field's first line.
<acun:card title="Order settings">
<div class="space-y-4">
<div class="grid items-start gap-2 sm:grid-cols-[10rem_1fr]">
<label for="setting_note" class="text-sm font-medium text-gray-700 sm:pt-2.5 dark:text-zinc-300">Invoice note</label>
<acun:textarea name="setting_note" rows="3" />
</div>
<div class="grid items-start gap-2 sm:grid-cols-[10rem_1fr]">
<span class="text-sm font-medium text-gray-700 dark:text-zinc-300">Notifications</span>
<div class="flex flex-col gap-3">
<acun:switch name="setting_sms" label="Send SMS" checked />
<acun:switch name="setting_email" label="Send email" />
</div>
</div>
</div>
</acun:card>| Prop | Values |
|---|---|
items-start | Aligns the row to the top |
sm:pt-2.5 | Moves the label down to the field's first line |
Required field, hint and error
acun:input shows the asterisk only when it has its own label; in a horizontal layout, add the asterisk to the label yourself. The hint and the error message appear below the field, in the right column.
<div class="space-y-4">
<div class="grid items-start gap-2 sm:grid-cols-[10rem_1fr]">
<label for="code" class="text-sm font-medium text-gray-700 sm:pt-2.5 dark:text-zinc-300">SKU <span class="text-red-500">*</span></label>
<acun:input name="code" value="WHP-01" required />
</div>
<div class="grid items-start gap-2 sm:grid-cols-[10rem_1fr]">
<label for="capacity" class="text-sm font-medium text-gray-700 sm:pt-2.5 dark:text-zinc-300">Daily capacity</label>
<acun:input name="capacity" type="number" value="40" hint="Maximum number of orders that can ship in a day." />
</div>
</div>| Prop | Values |
|---|---|
required | Passed to the field; add the asterisk to the label by hand |
hint | Below the field, in the right column |