Input

A text input component for forms and user data entry with built-in styling and accessibility features.

❯buridan add input

Component Guide

Use the following to build the Input component.

from components.ui.input import input

input()

Source Code & Dependencies

For manual installation, copy each of the source codes below in their respective locations.

components/core/core.py

components/ui/input.py

Examples

Basic Demo

The default appearance and behavior. type defaults to "text" if not set.

Props used: none required beyond default input(...).

Text Input

import reflex as rx
from components.ui.input import input


def input_basic_demo():
    return rx.el.div(
        rx.el.p("Text Input", class_name="text-sm font-medium mb-2"),
        input(
            type="text",
            placeholder="Enter your name",
        ),
        class_name="w-full max-w-md p-8",
    )

Email

Props used: type="email" on input.

Email Input

import reflex as rx
from components.ui.input import input


def input_email():
    return rx.el.div(
        rx.el.p("Email Input", class_name="text-sm font-medium mb-2"),
        input(
            type="email",
            placeholder="name@example.com",
        ),
        class_name="w-full max-w-md p-8",
    )

Password

Props used: type="password" on input.

Password Input

import reflex as rx
from components.ui.input import input


def input_password():
    return rx.el.div(
        rx.el.p("Password Input", class_name="text-sm font-medium mb-2"),
        input(
            type="password",
            placeholder="Enter your password",
        ),
        class_name="w-full max-w-md p-8",
    )

Disabled

Props used: disabled on input.

Disabled Input

import reflex as rx
from components.ui.input import input


def input_disabled():
    return rx.el.div(
        rx.el.p("Disabled Input", class_name="text-sm font-medium mb-2"),
        input(
            type="text",
            placeholder="Disabled input",
            disabled=True,
        ),
        class_name="w-full max-w-md p-8",
    )

File Input

Native file styling (file: classes) is already baked into the base input styles.

Props used: type="file" on input.

File Input

import reflex as rx
from components.ui.input import input


def input_file_input():
    return rx.el.div(
        rx.el.p("File Input", class_name="text-sm font-medium mb-2"),
        input(
            type="file",
        ),
        class_name="w-full max-w-md p-8",
    )

Custom Input

Props used: class_name on input.

Custom Width

import reflex as rx
from components.ui.input import input


def input_custom_input():
    return rx.el.div(
        rx.el.p("Custom Width", class_name="text-sm font-medium mb-2"),
        input(
            type="text",
            placeholder="Max width 300px",
            class_name="max-w-[300px]",
        ),
        class_name="w-full max-w-md p-8",
    )

API Reference

input

input(id="email", type="email", placeholder="you@example.com")

Prop	Type	Default
`type`	`str`	`"text"`
`disabled`	`bool`	`False`
`value` / `default_value`	`str`
`id`	`str`
`name`	`str`
`on_change`	`EventHandler`
`class_name`	`str`	`""`

Any other prop accepted by a native <input> is also passed straight through.