> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). For a Markdown version, remove the trailing slash from the page URL and append `.md`. The docs home is available at [index.md](http://localhost:3000/docs/index.md).

[High Level](https://reflex.dev/docs/library/forms/input/)

[Low Level](https://reflex.dev/docs/library/forms/input/low/)

# Input

A text field is an input field that users can type into. This component uses Radix's [text field](https://www.radix-ui.com/themes/docs/components/text-field)  component.

## Overview

The TextField component is used to capture user input and can include an optional slot for buttons and icons. It is based on the <div> element and supports common margin props.

## Basic Example

[Start Building Now!](https://build.reflex.dev/)

## Stateful Example with Blur Event

[Start Building Now!](https://build.reflex.dev/)

## Hello World!

## Controlled Example

[Start Building Now!](https://build.reflex.dev/)

## Hello World!

## Real World Example

[Start Building Now!](https://build.reflex.dev/)

The Less I Know

Rock

Breathe Deeper

Rock

Let It Happen

Rock

Borderline

Pop

Lost In Yesterday

Rock

Is It True

Rock

## API Reference

## rx.input.slot

Contains icons or buttons associated with an Input.

rx.input(

rx.input.slot(

rx.icon(tag="search", height="16", width="16"),

color_scheme="tomato",

),

placeholder="Search the docs",

)

`color_scheme`

### Props

| Prop | Type | Description |
| --- | --- | --- |
| `color_scheme` | `"tomato"``"red"``"ruby"``"crimson"``"pink"``"plum"``"purple"``"violet"``"iris"``"indigo"``"blue"``"cyan"``"teal"``"jade"``"green"``"grass"``"brown"``"orange"``"sky"``"mint"``"lime"``"yellow"``"amber"``"gold"``"bronze"``"gray"` | Override theme color for text field slot. |
| `side` | `"left"``"right"` | Which side of the input the slot should be placed on. |

### Event Triggers

[See the full list of default event triggers](https://reflex.dev/docs/api-reference/event-triggers/)