Input
A text field is an input field that users can type into. This component uses Radix's 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
Stateful Example with Blur Event
Hello World!
Controlled Example
Hello World!
Real World Example
The Less I Know
Rock
Breathe Deeper
Rock
Let It Happen
Rock
Borderline
Pop
Lost In Yesterday
Rock
Is It True
Rock
ExpandCollapse
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_schemeProps
| 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. |