---
title: "FormRow"
description: "Field in a horizontal layout: label on the left and control on the right from sm up. On mobile it returns to vertical so the text is not squeezed."
kind: component
id: C-015
registry: "field"
docs: "https://koten.codehive.com.co/components/form-row"
markdown: "https://koten.codehive.com.co/md/components/form-row.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/field.json"
language: en
---

# FormRow · 横組み

> Component C-015 in the Koten UI catalog.

Field in a horizontal layout: label on the left and control on the right from sm up. On mobile it returns to vertical so the text is not squeezed.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/field.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/field.json
```

## Files

- `@/components/ui/field.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Reference

- Upstream primitive: https://base-ui.com/react/components/field

## Examples

### Horizontal form

Three rows with short labels; help text and errors sit in the control column to keep the reading flow.

```tsx
<FormRow label="Cliente" description="Razón social" required>
  <Input placeholder="KURA Distribución" autoComplete="organization" />
</FormRow>

<FormRow label="Código" description="Identificador interno">
  <Input placeholder="KURA-0142" />
</FormRow>

<FormRow label="Notas">
  <Textarea rows={2} placeholder="Instrucciones internas" />
</FormRow>
```

### Error in a row

The error aligns under the control, not under the label, and keeps Field's accessible announcement.

```tsx
<FormRow
  label="Correo"
  description="Solo para avisos del pedido."
  error="El correo no es válido."
>
  <Input type="email" defaultValue="correo@" autoComplete="email" />
</FormRow>
```

### Use inside a form

Three horizontal rows, one required, with help text and submission.

```tsx
<form className="grid max-w-2xl gap-[var(--koten-gap)]">
  <FormRow label="Cliente" description="Razón social" required>
    <Input name="customer" autoComplete="organization" placeholder="KURA Distribución" />
  </FormRow>

  <FormRow label="Código" description="Identificador interno">
    <Input name="code" placeholder="KURA-0142" />
  </FormRow>

  <FormRow label="Correo" description="Solo para avisos del pedido.">
    <Input
      type="email"
      name="email"
      autoComplete="email"
      placeholder="nombre@ejemplo.com"
    />
  </FormRow>

  <div className="flex flex-wrap items-center gap-[var(--koten-gap)] sm:ps-[calc(140px+var(--koten-gap))]">
    <Button type="submit" variant="primary">Guardar ficha</Button>
  </div>
</form>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `label` | `ReactNode` | `—` | Required. Keep it short: the 140 px column leaves little room for long text. |
| `description` | `ReactNode` | `—` | Aligned under the control and linked with aria-describedby. |
| `error` | `ReactNode` | `—` | Changes the border tone and announces the message; it occupies the control column. |
| `required` | `boolean` | `false` | Adds the asterisk and the required attribute, exactly as in Field. |
| `labelClassName` | `string` | `—` | Label column adjustments; do not change the fixed width without a content reason. |
| `controlClassName` | `string` | `—` | Control column adjustments; useful for limiting the width of a specific field. |

## Accessibility

- FormRow is Field with orientation horizontal: it keeps the reading order of label first, then control.
- At sm and up the label takes 140 px; on mobile it stacks so words are not cut.
- Keep labels short: description and error live in the control column, not under the label.
- The error is announced exactly as in Field, with aria-invalid and aria-live polite.

## Sources

- Catalog page: https://koten.codehive.com.co/components/form-row
- Markdown: https://koten.codehive.com.co/md/components/form-row.md
- Repository: https://github.com/codehive-colombia/koten