# Form Sizing System

## Overview

The Xertica UI design system uses a **standardized sizing scale** across all form-related components. This ensures visual alignment when placing components side-by-side in form layouts.

---

## Standardized Size Scale: `"sm" | "md" | "lg"`

All form components support the same three-tier size prop:

### Text Input Components (Height-based)

| Size     | Height            | Padding         | Font            | Used by                                    |
| -------- | ----------------- | --------------- | --------------- | ------------------------------------------ |
| `sm`     | `h-8` (32px)      | `px-2 py-1`     | `text-sm`       | Input, SelectTrigger, Search, InputOTPSlot |
| **`md`** | **`h-10` (40px)** | **`px-3 py-2`** | **`text-base`** | **← Default for all**                      |
| `lg`     | `h-12` (48px)     | `px-4 py-3`     | `text-base`     | Input, SelectTrigger, Search, InputOTPSlot |

### Multi-line Input (Padding/Font only)

| Size     | Padding         | Font            | Used by       |
| -------- | --------------- | --------------- | ------------- |
| `sm`     | `px-2 py-1`     | `text-sm`       | Textarea      |
| **`md`** | **`px-3 py-2`** | **`text-base`** | **← Default** |
| `lg`     | `px-4 py-3`     | `text-base`     | Textarea      |

> **Note:** Textarea height is controlled by the `rows` prop, not by `size`.

### Toggle Components (Indicator-based)

| Size     | Checkbox            | RadioGroupItem      | Switch Track | Switch Thumb |
| -------- | ------------------- | ------------------- | ------------ | ------------ |
| `sm`     | 14px (`size-3.5`)   | 16px (`size-4`)     | 28×14px      | 12px         |
| **`md`** | **16px (`size-4`)** | **20px (`size-5`)** | **32×18px**  | **16px**     |
| `lg`     | 20px (`size-5`)     | 24px (`size-6`)     | 40×22px      | 20px         |

### Label

| Size     | Font          | Used for                              |
| -------- | ------------- | ------------------------------------- |
| `sm`     | `text-xs`     | Pairs with `sm` inputs                |
| **`md`** | **`text-sm`** | **← Default, pairs with `md` inputs** |
| `lg`     | `text-base`   | Pairs with `lg` inputs                |

---

## Components with Size Prop

| Component        | Prop   | Default | Values                 |
| ---------------- | ------ | ------- | ---------------------- |
| `Input`          | `size` | `"md"`  | `"sm" \| "md" \| "lg"` |
| `SelectTrigger`  | `size` | `"md"`  | `"sm" \| "md" \| "lg"` |
| `Textarea`       | `size` | `"md"`  | `"sm" \| "md" \| "lg"` |
| `Search`         | `size` | `"md"`  | `"sm" \| "md" \| "lg"` |
| `InputOTPSlot`   | `size` | `"md"`  | `"sm" \| "md" \| "lg"` |
| `Checkbox`       | `size` | `"md"`  | `"sm" \| "md" \| "lg"` |
| `RadioGroupItem` | `size` | `"md"`  | `"sm" \| "md" \| "lg"` |
| `Switch`         | `size` | `"md"`  | `"sm" \| "md" \| "lg"` |
| `Label`          | `size` | `"md"`  | `"sm" \| "md" \| "lg"` |

### Components with their own size system

| Component | Prop   | Default     | Values                                | Notes                                                                  |
| --------- | ------ | ----------- | ------------------------------------- | ---------------------------------------------------------------------- |
| `Button`  | `size` | `"default"` | `"default" \| "sm" \| "lg" \| "icon"` | Uses its own scale. `default`=h-9, `sm`=h-8, `lg`=h-10, `icon`=size-9. |

> **Note:** Button intentionally uses a separate naming convention (`default` instead of `md`) because it serves a different visual purpose (action trigger, not data entry) and has an additional `icon` variant.

### Components without size prop (not applicable)

| Component    | Reason                                          |
| ------------ | ----------------------------------------------- |
| `Slider`     | Track-based component, sizing is content-driven |
| `FileUpload` | Drop zone pattern, not inline form element      |

---

## Usage Examples

### Consistent Form Row (All md — default)

```tsx
<div className="grid grid-cols-3 gap-4 items-end">
  <div className="grid gap-2">
    <Label htmlFor="name">Nome</Label>
    <Input id="name" placeholder="Seu nome" />
  </div>
  <div className="grid gap-2">
    <Label htmlFor="role">Cargo</Label>
    <Select>
      <SelectTrigger>
        <SelectValue placeholder="Selecione" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="admin">Administrador</SelectItem>
      </SelectContent>
    </Select>
  </div>
  <div className="grid gap-2">
    <Label htmlFor="search">Buscar</Label>
    <Search placeholder="Pesquisar..." />
  </div>
</div>
```

### Compact Form (All sm)

```tsx
<div className="grid grid-cols-2 gap-3 items-end">
  <div className="grid gap-1">
    <Label size="sm" htmlFor="filter">
      Filtro
    </Label>
    <Input size="sm" id="filter" placeholder="..." />
  </div>
  <div className="grid gap-1">
    <Label size="sm" htmlFor="status">
      Status
    </Label>
    <Select>
      <SelectTrigger size="sm">
        <SelectValue placeholder="Todos" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="active">Ativo</SelectItem>
      </SelectContent>
    </Select>
  </div>
</div>
```

### Large Form (All lg)

```tsx
<div className="grid gap-4">
  <div className="grid gap-2">
    <Label size="lg" htmlFor="title">
      Título
    </Label>
    <Input size="lg" id="title" placeholder="Título do documento" />
  </div>
  <div className="grid gap-2">
    <Label size="lg" htmlFor="desc">
      Descrição
    </Label>
    <Textarea size="lg" id="desc" rows={4} />
  </div>
</div>
```

---

## AI Rules

- **Always use the same `size` for all form elements in the same row** — mixing sizes breaks visual alignment.
- **Default is `md`** — never specify `size="md"` explicitly; it's the default for all components.
- **Use `sm` for compact/dense UIs** — table filters, toolbar search inputs, sidebar forms.
- **Use `lg` for prominent/hero forms** — login pages, first-touch forms, large modals.
- **Button uses its own scale** — do not try to pass `"md"` to Button; it uses `"default"`.
- **Label size should match its Input size** — if you use `<Input size="sm">`, pair with `<Label size="sm">`.