︲

︲

Input

Custom input component.

Installation

Copy the following code into your app directory.

uv

buridan add component input
Usage
from components.ui.input import input
Anatomy

Use the following composition to build a Input

input()
Examples

Below are examples demonstrating how the component can be used.

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="name@example.com",
        ),
        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",
    )