✏️  Specialized Inputs

Submitted by Arnaud Miribel

Summary

Polished, specialized text inputs — phone, email, URL, money, search, password — built on st.components.v2. Pixel-perfect native Streamlit styling.

Functions

specialized_text_input

A polished, specialized text input that matches native Streamlit styling.

Parameters

label : str Widget label. icon : str | None Deprecated. Present for API compatibility, but label-prefixed icons are intentionally not rendered. Use adornment_icon (via the convenience wrappers) to show an icon inside the input field. prefix : str | None Text badge inside the left of the input border (e.g. "$"). suffix : str | None Text badge inside the right of the input border (e.g. ".com"). help : str | None Tooltip text shown on hover of a right-aligned (?) icon next to the label. error : str | bool | None True → red border. str → red border + inline message. input_type : str HTML <input type> attribute.

Returns

str The current value of the input.

Source code in src/streamlit_extras/specialized_inputs/__init__.py

@extra
def specialized_text_input(
    label: str,
    value: str = "",
    *,
    placeholder: str = "",
    key: str | None = None,
    on_change: Callable | None = None,
    args: tuple | None = None,
    kwargs: dict[str, Any] | None = None,
    disabled: bool = False,
    label_visibility: Literal["visible", "hidden", "collapsed"] = "visible",
    icon: str | None = None,
    prefix: str | None = None,
    suffix: str | None = None,
    help: str | None = None,
    error: str | bool | None = None,
    input_type: str = "text",
) -> str:
    """
    A polished, specialized text input that matches native Streamlit styling.

    Parameters
    ----------
    label : str
        Widget label.
    icon : str | None
        Deprecated. Present for API compatibility, but label-prefixed icons are
        intentionally not rendered. Use ``adornment_icon`` (via the convenience
        wrappers) to show an icon inside the input field.
    prefix : str | None
        Text badge inside the left of the input border (e.g. ``"$"``).
    suffix : str | None
        Text badge inside the right of the input border (e.g. ``".com"``).
    help : str | None
        Tooltip text shown on hover of a right-aligned (?) icon next to the label.
    error : str | bool | None
        ``True`` → red border. ``str`` → red border + inline message.
    input_type : str
        HTML ``<input type>`` attribute.

    Returns
    -------
    str
        The current value of the input.
    """
    return _mount(
        label=label,
        value=str(value),
        placeholder=placeholder,
        key=key,
        on_change=on_change,
        args=args,
        kwargs=kwargs,
        disabled=disabled,
        label_visibility=label_visibility,
        icon=icon,
        adornment_icon=None,
        prefix=prefix,
        suffix=suffix,
        help=help,
        error=error,
        input_type=input_type,
        is_password=False,
        trailing_icon=None,
    )

Import:

from streamlit_extras.specialized_inputs import specialized_text_input # (1)!

1. You should add this to the top of your .py file

Examples

example

def example() -> None:
    """Gallery demo shown on the streamlit-extras website."""
    import streamlit as st

    st.text_input("Text input", placeholder="Text input", help="Help")
    st.text_input("Password input", placeholder="Password input", type="password")
    st.chat_input(placeholder="Chat input")
    pwd = password_input("Password", help="Minimum 8 characters", key="ex_pwd")
    if pwd:
        st.caption(f"Length: {len(pwd)} chars")

    email = email_input("Email address", key="ex_email", label_visibility="collapsed")
    if email:
        valid = bool(re.match(r"^[^@]+@[^@]+\.[^@]+$", email))
        if not valid:
            email_input(
                "Email address (validated)",
                value=email,
                error="Please enter a valid email address.",
                key="ex_email_val",
            )

    phone_input("Phone number", help="Include your country code", key="ex_phone")
    url_input("Website", placeholder="acme.com", key="ex_url")
    amount = money_input("Amount", currency="€", help="Enter a positive value", key="ex_money")
    if amount:
        st.caption(f"Entered: {amount:.2f} €")

    q = search_input("Search", label_visibility="collapsed", key="ex_search")
    if q:
        st.caption(f"Query: {q!r}")

    specialized_text_input(
        "Bluesky handle",
        suffix=".bsky.social",
        placeholder="yourhandle",
        help="Enter your handle without the @",
        key="ex_custom",
    )