# Input

> Text input field for collecting user input.

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

---

Text input field for collecting user input.

## Preview

```
[Enter your name...]
```

## Usage

```go
node := models.WidgetNode{
    Type:        models.WidgetNodeTypeInput,
    Name:        "email",
    Placeholder: "Enter your email",
}
```

## Props

| Name | Type | Description | Default |
|------|------|-------------|---------|
| `type` | `"input"` | Node type | required |
| `name` | `string` | Form field name (key in form data) | required |
| `placeholder` | `string` | Placeholder text | - |
| `defaultValue` | `string` | Initial value | `""` |
| `required` | `boolean` | Whether the field is required | `false` |
| `disabled` | `boolean` | Disable the input | `false` |
| `onChangeAction` | `WidgetAction` | Action triggered when value changes | - |

## Examples

### Basic Input

```go
{Type: models.WidgetNodeTypeInput, Name: "name", Placeholder: "Enter name"}
```

### With Default Value

```go
{
    Type:         models.WidgetNodeTypeInput,
    Name:         "email",
    Placeholder:  "Enter email",
    DefaultValue: "user@example.com",
}
```

### Input with Change Action

Trigger an action when the input value changes (useful for live validation or search):

```go
{
    Type:        models.WidgetNodeTypeInput,
    Name:        "search",
    Placeholder: "Search...",
    OnChangeAction: &models.WidgetAction{
        Type:    "search_changed",
        Handler: "client",
    },
}
```

### Form with Multiple Inputs

```go
widget := &models.Widget{
    Type:  models.WidgetTypeUI,
    Title: "User Profile",
    Children: []models.WidgetNode{
        {
            Type: models.WidgetNodeTypeCol,
            Gap:  3,
            Children: []models.WidgetNode{
                {Type: models.WidgetNodeTypeLabel, Value: "First Name", FieldName: "first_name"},
                {Type: models.WidgetNodeTypeInput, Name: "first_name", Placeholder: "First name"},
                {Type: models.WidgetNodeTypeLabel, Value: "Last Name", FieldName: "last_name"},
                {Type: models.WidgetNodeTypeInput, Name: "last_name", Placeholder: "Last name"},
                {Type: models.WidgetNodeTypeLabel, Value: "Email", FieldName: "email"},
                {Type: models.WidgetNodeTypeInput, Name: "email", Placeholder: "Email address"},
                {
                    Type:    models.WidgetNodeTypeRow,
                    Gap:     2,
                    Justify: "end",
                    Children: []models.WidgetNode{
                        {
                            Type:    models.WidgetNodeTypeButton,
                            Label:   "Save",
                            Variant: "default",
                            OnClickAction: &models.WidgetAction{
                                Type:            "save_profile",
                                LoadingBehavior: "self",
                            },
                        },
                    },
                },
            },
        },
    },
}
```

## Form Data

When the widget is submitted, input values are included in the form data:

```json
{
  "first_name": "John",
  "last_name": "Doe",
  "email": "john@example.com"
}
```

## TypeScript

```typescript
const node: WidgetNode = {
  type: "input",
  name: "email",
  placeholder: "Enter email",
  defaultValue: "",
  onChangeAction: {
    type: "email_changed",
    handler: "client",
  },
}
```

## Best Practices

1. **Always set `name`** - Required for form data collection
2. **Use descriptive placeholders** - Guide users on expected input
3. **Use labels** - Add Label nodes before inputs for accessibility
4. **Wrap in Col** - Stack multiple inputs vertically with gap
5. **Use onChangeAction sparingly** - For live validation or search, not every input