Import
from reflex_ui import input
Description
A custom input component with icon support, clear button, and size variants.
Basic Usage
input(placeholder="Enter text")
input(icon="SearchIcon", size="md")
input(value=State.value, on_change=State.set_value)
High-Level Props
size
Literal['xs', 'sm', 'md', 'lg', 'xl'] | Var[...]
default:"md"
Size of the input component.
Icon name to display at the start of the input (from HugeIcon set).
show_clear_button
Var[bool] | bool
default:"True"
Whether to show the clear button when input has value.
clear_events
Var[list[EventHandler]] | list[EventHandler]
Additional event handlers to fire when clear button is clicked.
value
Var[float | int | str] | float | int | str
The controlled value of the input.
default_value
Var[float | int | str] | float | int | str
The default uncontrolled value.
Placeholder text to display when empty.
type
Literal['button', 'checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week'] | Var[...]
default:"text"
The type attribute of the input element.
disabled
Var[bool] | bool
default:"False"
Whether the input is disabled.
read_only
Var[bool] | bool
default:"False"
Whether the input is read-only.
required
Var[bool] | bool
default:"False"
Whether the input is required.
Whether the input should automatically receive focus.
max_length
Var[float | int] | float | int
Maximum number of characters allowed.
min_length
Var[float | int] | float | int
Minimum number of characters required.
Regex pattern for validation.
Name of the input for form submission.
Autocomplete attribute value.
Size Variants
INPUT_SIZE_VARIANTS = {
"xs": "px-1.5 h-7 rounded-ui-xs gap-1.5",
"sm": "px-2 h-8 rounded-ui-sm gap-2",
"md": "px-2.5 h-9 rounded-ui-md gap-2",
"lg": "px-3 h-10 rounded-lg gap-2.5",
"xl": "px-3.5 h-12 rounded-ui-xl gap-3",
}
Default Attributes
DEFAULT_INPUT_ATTRS = {
"autoComplete": "off",
"autoCapitalize": "none",
"autoCorrect": "off",
"spellCheck": "false",
}
Event Handlers
on_value_change
EventType[()] | EventType[str] | EventType[str, dict]
Fired when the input value changes.
on_change
EventType[()] | EventType[str]
Standard HTML change event.
on_blur
EventType[()] | EventType[str]
Fired when the input loses focus.
on_focus
EventType[()] | EventType[str]
Fired when the input receives focus.
on_key_down
EventType[()] | EventType[str] | EventType[str, KeyInputInfo]
Fired when a key is pressed down.
on_key_up
EventType[()] | EventType[str] | EventType[str, KeyInputInfo]
Fired when a key is released.
Subcomponents
The root input element without the wrapper.
input.root(
placeholder="Text",
**props
) -> InputRoot
Class Names Reference
input.class_names.INPUT # Input element classes
input.class_names.DIV # Container div classes
"outline-none bg-transparent text-secondary-12 placeholder:text-secondary-9 text-sm leading-normal peer disabled:text-secondary-8 disabled:placeholder:text-secondary-8 w-full data-[disabled]:pointer-events-none font-medium"
DIV Class
"flex flex-row items-center focus-within:shadow-[0px_0px_0px_2px_var(--primary-4)] focus-within:border-primary-a6 not-data-[invalid]:focus-within:hover:border-primary-a6 bg-secondary-1 shrink-0 border border-secondary-a4 hover:border-secondary-a6 transition-[color,box-shadow] text-secondary-9 [&_svg]:pointer-events-none has-data-[disabled]:border-secondary-4 has-data-[disabled]:bg-secondary-3 has-data-[disabled]:text-secondary-8 has-data-[disabled]:cursor-not-allowed cursor-text has-data-[invalid]:border-destructive-10 has-data-[invalid]:focus-within:border-destructive-a11 has-data-[invalid]:focus-within:shadow-[0px_0px_0px_2px_var(--destructive-4)] has-data-[invalid]:hover:border-destructive-a11"
Method Signature
@classmethod
def create(
cls,
*children,
size: Literal["lg", "md", "sm", "xl", "xs"] | Var[...] | None = None,
icon: Var[str] | str | None = None,
show_clear_button: Var[bool] | bool | None = None,
clear_events: Var[list[EventHandler]] | list[EventHandler] | None = None,
# Standard input props
value: Var[float | int | str] | float | int | str | None = None,
default_value: Var[float | int | str] | float | int | str | None = None,
placeholder: Var[str] | str | None = None,
type: Var[str] | str | None = None,
disabled: Var[bool] | bool | None = None,
**props
) -> HighLevelInput
Return Type
HighLevelInput - Returns a complete input component with wrapper, icon, and clear button.