> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sure-developer.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Input

> Single-line text input with Lua onChange payloads

# Input

`Input` renders a single-line text input. It sends a payload with `value = string` to Lua whenever the value changes.

```lua theme={"dark"}
local search, setSearch = track.state('search', '')

lui.page('search', function(ui)
  ui.input({
    placeholder = 'Search item',
    prefixIconComponent = 'lucide:search',
    suffix = 'esc',
    value = search,
    onChange = function(payload)
      setSearch(payload.value)
    end
  })
end)
```

## API

<CodeGroup>
  ```lua Builder theme={"dark"}
  ui.input(props)
  ```

  ```lua Declarative theme={"dark"}
  lui.input(props)
  ```
</CodeGroup>

## Props

| Prop                                                       | Type                        | Description                               |
| ---------------------------------------------------------- | --------------------------- | ----------------------------------------- |
| `value`                                                    | `string \| reactive getter` | Current input value.                      |
| `placeholder`                                              | `string`                    | Placeholder text.                         |
| `onChange`                                                 | `function(payload)`         | Receives a payload with `value = string`. |
| `prefix`, `prefixIcon`, `prefixIconComponent`              | icon                        | Leading content or Iconify icon.          |
| `suffix`, `suffixIcon`, `suffixIconComponent`              | icon                        | Trailing content or Iconify icon.         |
| `startIcon`, `startIconComponent`, `icon`, `iconComponent` | icon                        | Alternative leading icon props.           |
| `endIcon`, `endIconComponent`                              | icon                        | Alternative trailing icon props.          |
| `wrapperClassName`                                         | `string`                    | Class for the outer label wrapper.        |
| `inputClassName`                                           | `string`                    | Class for the input element.              |
| `prefixClassName`, `suffixClassName`, `iconClassName`      | `string`                    | Classes for icon slots.                   |
| `className`, `style`                                       | mixed                       | Common LUI styling props.                 |

<Warning>
  The renderer uses `defaultValue`, so keep reactive state in Lua as the source of truth and update it from `onChange`.
</Warning>