# Label

> Accessible label for a form field.

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

---

Accessible label for a form field.

## Preview

```
Email
[________________]
```

## Usage

```go
node := models.WidgetNode{
    Type:      models.WidgetNodeTypeLabel,
    Value:     "Email",
    FieldName: "email",
}
```

## Props

| Name | Type | Description | Default |
|------|------|-------------|---------|
| `type` | `"label"` | Node type | required |
| `value` | `string` | Text content of the label | required |
| `fieldName` | `string` | Name of the field this label describes | required |
| `size` | `string` | Size token: `xs`, `sm`, `md`, `lg`, `xl` | `"sm"` |
| `weight` | `string` | Font weight: `normal`, `medium`, `semibold`, `bold` | `"medium"` |
| `color` | `string \| ThemeColor` | Text color | - |
| `textAlign` | `string` | Horizontal alignment | `"start"` |

## Examples

### Basic Label

```go
{
    Type: models.WidgetNodeTypeCol,
    Gap:  1,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeLabel, Value: "Email", FieldName: "email"},
        {Type: models.WidgetNodeTypeInput, Name: "email", Placeholder: "you@example.com"},
    },
}
```

### Form with Labels

```go
widget := &models.Widget{
    Type:        models.WidgetTypeUI,
    Title:       "Contact Form",
    Interactive: true,
    Children: []models.WidgetNode{
        {
            Type: models.WidgetNodeTypeCol,
            Gap:  3,
            Children: []models.WidgetNode{
                // Name field
                {Type: models.WidgetNodeTypeCol, Gap: 1, Children: []models.WidgetNode{
                    {Type: models.WidgetNodeTypeLabel, Value: "Name", FieldName: "name"},
                    {Type: models.WidgetNodeTypeInput, Name: "name", Placeholder: "Your name"},
                }},
                // Email field
                {Type: models.WidgetNodeTypeCol, Gap: 1, Children: []models.WidgetNode{
                    {Type: models.WidgetNodeTypeLabel, Value: "Email", FieldName: "email"},
                    {Type: models.WidgetNodeTypeInput, Name: "email", Placeholder: "you@example.com"},
                }},
            },
        },
    },
    Actions: []models.WidgetActionButton{
        {Label: "Submit", Action: models.WidgetAction{Type: "submit"}},
    },
}
```

### Label with Required Indicator

```go
{
    Type: models.WidgetNodeTypeRow,
    Gap:  1,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeLabel, Value: "Password", FieldName: "password"},
        {Type: models.WidgetNodeTypeText, Value: "*", Variant: "muted"},
    },
}
```

## TypeScript

```typescript
const node: WidgetNode = {
  type: "label",
  value: "Email",
  fieldName: "email",
}
```

## Accessibility

Labels are important for accessibility:
- Screen readers announce the label when the field is focused
- Clicking the label focuses the associated input
- The `fieldName` prop links the label to the input via the `name` attribute

## Best Practices

1. **Always use with inputs** - Every form field should have a label
2. **Keep labels short** - 1-3 words
3. **Match fieldName to input name** - Ensures proper association
4. **Stack vertically** - Label above input is most readable