︲

︲

Input

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

Installation

Copy the following code into your app directory.

uv

uv run buridan add component input
from components.ui.input import input

Anatomy

Use the following composition to build an Input component.

input()

Examples

Basic Demo

A simple text input demonstrating the default appearance and behavior.

Text Input

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


def input_basic_demo():
    return rx.el.div(
        rx.text("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

An input field optimized for email address entry.

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="[email protected]",
        ),
        class_name="w-full max-w-md p-8",
    )

Password

An input field that hides characters for secure password entry.

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

An example of an input field in a disabled state.

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

An input field for selecting and uploading files.

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

An input field with a custom width and styling.

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",
    )