# Col

> Arranges children vertically with configurable gap.

**URL:** https://inference.sh/docs/agents/widgets/col
**Last updated:** 2026-09-18

---

Arranges children vertically with configurable gap.

## Preview

```
[child1]
[child2]
[child3]
```

## Usage

```go
node := models.WidgetNode{
    Type: models.WidgetNodeTypeCol,
    Gap:  2,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeText, Value: "Item 1"},
        {Type: models.WidgetNodeTypeText, Value: "Item 2"},
        {Type: models.WidgetNodeTypeText, Value: "Item 3"},
    },
}
```

## Props

| Name | Type | Description | Default |
|------|------|-------------|---------|
| `type` | `"col"` | Node type | required |
| `gap` | `number` | Gap between children (Tailwind spacing scale) | `2` |
| `children` | `WidgetNode[]` | Child nodes to arrange vertically | - |

### Gap Values

Gap uses Tailwind's spacing scale:

| Gap | Pixels | Use Case |
|-----|--------|----------|
| `0` | 0px | No gap (tight grouping) |
| `1` | 4px | Related content (title + description) |
| `2` | 8px | Default item spacing |
| `3` | 12px | Section spacing |
| `4` | 16px | Large section spacing |

## Examples

### Text with Description

```go
{
    Type: models.WidgetNodeTypeCol,
    Gap:  1,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeText, Value: "Step Title", Variant: "title"},
        {Type: models.WidgetNodeTypeText, Value: "This is a description of what this step does.", Variant: "muted"},
    },
}
```

### List of Steps

```go
{
    Type: models.WidgetNodeTypeCol,
    Gap:  2,
    Children: []models.WidgetNode{
        // Step 1
        {Type: models.WidgetNodeTypeRow, Gap: 2, Children: []models.WidgetNode{
            {Type: models.WidgetNodeTypeBadge, Label: "✓", Variant: "secondary"},
            {Type: models.WidgetNodeTypeText, Value: "Install dependencies"},
        }},
        // Step 2
        {Type: models.WidgetNodeTypeRow, Gap: 2, Children: []models.WidgetNode{
            {Type: models.WidgetNodeTypeBadge, Label: "●", Variant: "default"},
            {Type: models.WidgetNodeTypeText, Value: "Build application"},
        }},
        // Step 3
        {Type: models.WidgetNodeTypeRow, Gap: 2, Children: []models.WidgetNode{
            {Type: models.WidgetNodeTypeBadge, Label: "○", Variant: "outline"},
            {Type: models.WidgetNodeTypeText, Value: "Deploy to production"},
        }},
    },
}
```

### Form Layout

```go
{
    Type: models.WidgetNodeTypeCol,
    Gap:  3,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeInput, Name: "name", Placeholder: "Enter name"},
        {Type: models.WidgetNodeTypeInput, Name: "email", Placeholder: "Enter email"},
        {Type: models.WidgetNodeTypeSelect, Name: "role", Placeholder: "Select role", Options: []models.WidgetSelectOption{
            {Label: "Admin", Value: "admin"},
            {Label: "User", Value: "user"},
        }},
    },
}
```

## CSS Output

```css
.col {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
```

## TypeScript

```typescript
const node: WidgetNode = {
  type: "col",
  gap: 2,
  children: [
    { type: "text", value: "Title", variant: "title" },
    { type: "text", value: "Description", variant: "muted" },
  ],
}
```

## Best Practices

1. **Use Gap: 1 for related content** - Title + description pairs
2. **Use Gap: 2 for list items** - Standard spacing for lists
3. **Nest Row inside Col** - Create complex layouts by combining
4. **Top-level wrapper** - Widget.Children usually starts with a Col