︲

︲

Input Group

Add addons, buttons, and helper content to inputs.

Installation

Copy the following code into your app directory.

uv

uv run buridan add component input_group

Examples

Price Input

An input field with a currency prefix for entering prices.

$

USD

import reflex as rx

from components.ui.input_group import input_with_addons


def input_group_price_input():
    return rx.el.div(
        input_with_addons(
            placeholder="0.00",
            prefix="$",
            suffix="USD",
        ),
        class_name="w-full max-w-sm mx-auto py-6",
    )

URL Input

An input field with a prefixed URL scheme for web addresses.

https://

.com

import reflex as rx

from components.ui.input_group import input_with_addons


def input_group_url_input():
    return rx.el.div(
        input_with_addons(
            placeholder="example.com",
            prefix="https://",
            suffix=".com",
        ),
        class_name="w-full max-w-sm mx-auto py-6",
    )

Email Input

An input field that appends a fixed domain for email entry.

Email Input

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


def input_group_email_input():
    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",
    )

Textarea with Footer

A multiline input with a footer displaying additional information or controls.

import reflex as rx

from components.ui.input_group import textarea_with_footer


def input_group_textarea_with_footer():
    return rx.el.div(
        textarea_with_footer(
            placeholder="Enter your message",
            footer_text="120 characters left",
        ),
        class_name="w-full max-w-sm mx-auto py-6",
    )