Input

компонент ввода текста для форм и ввода пользовательских данных со встроенными функциями стиля и специальных возможностей.

❯buridan add input

Error: Reference Target 'вход' not found

Error: Reference Target 'входные данные' not found

Примеры

Базовая демонстрация

Внешний вид и поведение по умолчанию. type по умолчанию равен "text", если не установлен.

Использованный реквизит: ничего не требуется, кроме 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",
    )

Электронная почта

Использованный реквизит: type="email" на input.

Error: Reference Target 'входной_адрес электронной почты' not found

Пароль

Использованный реквизит: type="password" на input.

Error: Reference Target 'входной_пароль' not found

Отключено

Использованный реквизит: disabled на 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:) уже встроен в базовые стили ввода.

Использованный реквизит: type="file" на input.

Error: Reference Target 'входной_файл_вход' not found

Пользовательский ввод

Использованный реквизит: class_name на 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

ввод

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

Опора	Тип	По умолчанию
`type`	`str`	`"text"`
`disabled`	`bool`	`False`
`value` / `default_value`	`str`
`id`	`str`
`name`	`str`
`on_change`	`EventHandler`
`class_name`	`str`	`""`

Любой другой реквизит, принятый нативным <input>, также передается напрямую.

External Tools

︲

On This Page