Skip to main content
The Input component provides a styled text input field with optional icons, automatic clear button, and form integration.

​
Basic Usage

import reflex_ui as ui

ui.input(
    placeholder="Enter your name",
    name="username"
)

​
Sizes

Inputs support 5 different sizes: 
ui.input(placeholder="Extra Small", size="xs")
ui.input(placeholder="Small", size="sm")
ui.input(placeholder="Medium", size="md")  # Default
ui.input(placeholder="Large", size="lg")
ui.input(placeholder="Extra Large", size="xl")
​
size
Literal['xs', 'sm', 'md', 'lg', 'xl']
default:"md"
The size of the input field

​
With Icon

Add a leading icon to the input: 
ui.input(
    icon="SearchIcon",
    placeholder="Search...",
    name="search"
)
​
icon
str
Icon name from the HugeIcon library to display at the start of the input

​
Clear Button

By default, a clear button appears when the input has content: 
ui.input(
    placeholder="Type something",
    show_clear_button=True  # Default
)

# Disable clear button
ui.input(
    placeholder="No clear button",
    show_clear_button=False
)
​
show_clear_button
bool
default:"True"
Shows a button to clear the input value
​
clear_events
list[EventHandler]
default:"[]"
Additional events to fire when the clear button is clicked

​
Form Integration

ui.input(
    name="email",
    type="email",
    placeholder="Email address",
    required=True,
    value=State.email,
    on_change=State.set_email
)

​
Value Control

class FormState(rx.State):
    username: str = ""

ui.input(
    value=FormState.username,
    on_change=FormState.set_username,
    placeholder="Username"
)

​
Props Reference

​
placeholder
str
Placeholder text when input is empty
​
type
str
default:"text"
HTML input type (text, email, password, number, etc.)
​
value
str | Var[str]
Controlled value of the input
​
default_value
str
Initial uncontrolled value
​
on_change
EventHandler
Event fired when input value changes
​
on_value_change
EventHandler
Alternative change event handler
​
on_key_down
EventHandler
Event fired on key press
​
on_focus
EventHandler
Event fired when input gains focus
​
on_blur
EventHandler
Event fired when input loses focus
​
disabled
bool
default:"False"
Disables the input
​
required
bool
default:"False"
Makes the input required for form submission
​
read_only
bool
default:"False"
Makes the input read-only
​
name
str
Form field name for submission
​
id
str
HTML id attribute (auto-generated if not provided)
​
class_name
str
Additional CSS classes

​
Auto-Complete Settings

The input automatically disables browser autocomplete features:
  • autoComplete="off"
  • autoCapitalize="none"
  • autoCorrect="off"
  • spellCheck="false"
Override these via custom_attrs if needed.

​
Low-Level API

For direct control, use the root component: 
ui.input.root(
    placeholder="Custom input",
    class_name="custom-styles"
)

​
Implementation Details

From source code at reflex_ui/components/base/input.py:67:
  • High-level wrapper creates a div container with icon, input, and clear button
  • Uses focus-within for container styling
  • Clear button opacity controlled by CSS peer selectors
  • Supports all standard HTML input attributes

Build docs developers (and LLMs) love

Get started for freeTalk to us