ReflexKR

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Kursüberblick

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typografie

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formulare

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Datenanzeige

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Auf- und Zuklappen

Tabs

Accordion

Segmented Control

Overlays

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamisches Rendern

Cond

Match

Foreach

Auto Scroll

Medien

Image

Audio

Video

Tabellen und Datengrids

Table

Data Table

Data Editor

Diagramme

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Diagrammbausteine

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Andere Diagrammbibliotheken

Plotly

Pyplot

HTML-Elemente

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Weitere Werkzeuge

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Formulare

Input

rx.inputrx.input.slot

Offizielle Doku

Werkstattauftrag

Bitte baue ein Feld zum Abonnieren des Newsletters. Es nimmt eine E-Mail-Adresse entgegen, und bei falschem Format darf nichts abgeschickt werden.

rx.input ist ein einzeiliges Eingabefeld. Du nimmst es für kurze Werte wie Suchbegriffe, Namen, E-Mail-Adressen oder Passwörter. Für mehrere Zeilen gibt es Text Area.

rx.input(placeholder="Search the docs")

Props ausprobieren

Mit type wird aus demselben Feld ein Passwortfeld, eine Datumsauswahl oder ein Farbwähler. Die übrigen Props bestimmen das Aussehen.

Props ausprobieren

placeholder

type

variant

size

color

radius

disabled

read_only

rx.input(placeholder="Search the docs", type="text", variant="surface", size="2", color_scheme="indigo", radius="medium", disabled=False, read_only=False)

variant gibt es als classic · surface · soft. read_only zeigt den Wert nur an, disabled blendet das Feld ab und verhindert auch den Fokus.

Prop	Werte	Standard	Verwendung
`placeholder`	String	keiner	Blasser Hinweistext, solange das Feld leer ist
`type`	`"text"` `"password"` `"email"` `"number"` `"date"` …	`"text"`	Eingabeart, wie bei HTML `<input type>`
`value` / `default_value`	String · Zahl	keiner	Gesteuerter Wert / Wert, der nur einmal am Anfang gesetzt wird
`variant`	`"classic"` `"surface"` `"soft"`	`"surface"`	Aussehen
`size`	`"1"` bis `"3"`	`"2"`	Höhe und Schriftgröße
`color_scheme`, `radius`	Radix-Farbname / `"none"` bis `"full"`	Theme-Wert	Akzentfarbe und Ecken
`name`, `required`	String / `True`	keiner	Name beim Absenden eines Formulars; leeres Feld blockiert das Absenden
`max_length`, `min_length`, `pattern`	Zahl / regulärer Ausdruck	keiner	Zeichenzahl und Format, vom Browser geprüft
`min`, `max`, `step`	Zahl	keiner	Bereich und Schrittweite für `type="number"`, `"date"` usw.
`disabled`, `read_only`, `auto_focus`	`True` / `False`	`False`	Sperren, nur lesen, Fokus sofort beim Laden der Seite
`auto_complete`	`True` / `False`	Browserwert	Autovervollständigung des Browsers. Die offizielle Doku nennt auch Strings wie `"off"`, 0.10 akzeptiert aber nur bool
`on_change`	Event		Wenn sich der Wert ändert. Übergibt den neuen Wert (String)
`on_blur`, `on_focus`	Event		Wenn das Feld den Fokus verliert / bekommt. Auch `on_blur` übergibt den Wert
`on_key_down`, `on_key_up`	Event		Wenn eine Taste gedrückt / losgelassen wird. Übergibt den Tastennamen

on_blur: einmal, wenn du fertig bist

on_blur wird einmal aufgerufen, wenn der Fokus das Feld verlässt. Klickst du daneben oder springst mit Tab weiter, geht der aktuelle Wert an den State. Das passt, wenn nicht jeder Tastendruck den Server erreichen muss.

Hello World!

class InputBlurState(rx.State):
    text: str = "Hello World!"

    @rx.event
    def set_text(self, value: str):
        self.text = value


rx.vstack(
    rx.heading(InputBlurState.text, size="5"),
    rx.input(placeholder="Type, then click outside", on_blur=InputBlurState.set_text),
)

Gesteuerte Eingabe: value + on_change

Gibst du value einen State-Wert und änderst ihn über on_change, entspricht der Feldinhalt immer dem State. Das nennt man gesteuerte (controlled) Eingabe. Ändert der Server den Wert, zieht das Feld mit.

Bekommt rx.input sowohl value als auch on_change, wird es intern in eine entprellte Eingabe (DebounceInput) gehüllt. Während du tippst, erscheint der Text sofort, an den Server geht er erst, wenn du kurz innehältst (standardmäßig 300 ms). So stockt die Eingabe nicht, obwohl der State den Wert hält.

Hello World!

class InputControlledState(rx.State):
    text: str = "Hello World!"

    @rx.event
    def set_text(self, value: str):
        self.text = value


rx.vstack(
    rx.heading(InputControlledState.text, size="5"),
    rx.input(
        placeholder="Type here",
        value=InputControlledState.text,
        on_change=InputControlledState.set_text,
    ),
)

Nutzt du nur on_change oder on_blur ohne value, ist es eine ungesteuerte (uncontrolled) Eingabe. Den Anfangswert setzt du mit default_value, danach hält der Browser den Wert.

Slots: Icons und Text anhängen

Gibst du rx.input.slot als Kind hinein, sitzt ein Icon oder ein kurzer Text innen im Feld. Mit side="right" landet er rechts. Ein Slot nimmt auch ein eigenes color_scheme.

@example.com

rx.vstack(
    rx.input(
        rx.input.slot(rx.icon("search", size=16)),
        placeholder="Search the docs",
    ),
    rx.input(
        rx.input.slot(rx.icon("at-sign", size=16)),
        rx.input.slot(rx.text("@example.com", size="1"), side="right"),
        placeholder="username",
    ),
)

Eingabearten (type)

type nimmt dieselben Werte wie HTML <input type>. Es gibt "text" (Standard), "password", "email", "number", "date", "time", "url", "color" und mehr, und der Browser zeigt jeweils das passende Eingabewerkzeug. Die vollständige Liste steht in der MDN-Doku zu input.

rx.vstack(
    rx.input(placeholder="Username", type="text"),
    rx.input(placeholder="Password", type="password"),
    rx.input(placeholder="Email", type="email"),
    rx.input(type="number", min=0, max=10, step=1, default_value="3"),
    rx.input(type="date"),
    rx.input(type="color", default_value="#3e63dd", width="80px"),
)

Mit einem Formular absenden

Eingaben in einem Formular landen nur dann als Name: Wert in den gesendeten Daten, wenn sie einen name haben. Mit required=True verhindert der Browser das Absenden, solange das Feld leer ist. Auch pattern und max_length prüft der Browser vor dem Absenden. Das zweite Feld unten lässt nur genau drei Ziffern durch.

Results:

{}

class InputFormState(rx.State):
    form_data: dict = {}

    @rx.event
    def handle_submit(self, form_data: dict):
        self.form_data = form_data


rx.card(
    rx.vstack(
        rx.form.root(
            rx.hstack(
                rx.input(name="username", placeholder="Username", required=True),
                rx.input(name="code", placeholder="3 digits", pattern="[0-9]{3}", max_length=3),
                rx.button("Submit", type="submit"),
            ),
            on_submit=InputFormState.handle_submit,
            reset_on_submit=True,
        ),
        rx.divider(),
        rx.hstack(rx.text("Results:", weight="bold"), rx.badge(InputFormState.form_data.to_string())),
    ),
)

Formulare selbst behandelt die Seite Form ausführlich.

Wert ohne State ändern: rx.set_value

rx.set_value("id", Wert) ändert den Wert der Eingabe mit dieser id direkt. Damit leerst oder füllst du ein Feld, ohne eine State-Variable anzulegen.

rx.hstack(
    rx.input(id="input_erase_demo", default_value="Erase me"),
    rx.button("Erase", on_click=rx.set_value("input_erase_demo", "")),
    rx.button("Fill", on_click=rx.set_value("input_erase_demo", "Hello"), variant="soft"),
)

Tastatur-Events

on_key_down übergibt bei jedem Tastendruck den Tastennamen ("Enter", "a" …). Soll Enter etwas auslösen, ist es meist einfacher, die Eingabe in ein Formular zu setzen.

Last key: -

class InputKeyState(rx.State):
    last_key: str = "-"

    @rx.event
    def on_key(self, key: str):
        self.last_key = key


rx.vstack(
    rx.input(placeholder="Press any key", on_key_down=InputKeyState.on_key),
    rx.text("Last key: ", rx.code(InputKeyState.last_key)),
)

Auftrag erledigt

Mit type="email" und required=True prüft zuerst der Browser das Format, und das Formular verarbeitet Enter und den Button gleichermaßen. Von den eingegangenen Adressen werden nur die letzten drei angezeigt.

class InputNewsletterState(rx.State):
    emails: list[str] = []

    @rx.event
    def subscribe(self, form_data: dict):
        email = form_data.get("email", "").strip()
        if email and email not in self.emails:
            self.emails = (self.emails + [email])[-3:]


rx.vstack(
    rx.form(
        rx.hstack(
            rx.input(
                rx.input.slot(rx.icon("mail", size=16)),
                name="email",
                type="email",
                placeholder="you@example.com",
                required=True,
                flex="1",
            ),
            rx.button("Subscribe", type="submit"),
            width="100%",
        ),
        on_submit=InputNewsletterState.subscribe,
        reset_on_submit=True,
        width="100%",
    ),
    rx.foreach(InputNewsletterState.emails, lambda e: rx.badge(e, variant="soft")),
    width="100%",
    max_width="420px",
)

Werkstattnotizen

Mit rx.input(placeholder=...) anlegen, mit type die Eingabeart wählen.
on_blur feuert einmal beim Verlassen, value + on_change ergibt eine gesteuerte Eingabe (automatisch entprellt).
Icons per rx.input.slot, rechts mit side="right".
Im Formular wird name zum Schlüssel; required · pattern · max_length prüft der Browser.
Wert ohne State ändern: rx.set_value("id", Wert).

← Zurück

Formulare · Button

Weiter →

Formulare · Text Area

Über neue Lektionen informiert werden

Wir schicken dir eine E-Mail, wenn dieser Kurs neue Lektionen bekommt oder ein Folgekurs erscheint.

Fragen & Antworten

Frag alles zu dieser Lektion. Fragen aus allen Sprachversionen dieser Seite erscheinen hier gemeinsam.

ReflexKR

Python und Reflex zum Anfassen. Alle Beispiele wurden mit Reflex 0.10.0 ausgeführt und geprüft.

ReflexKR ist kostenlos und ohne Werbebanner. Wenn es dir geholfen hat, kannst du es mit einem Kaffee unterstützen. ☕ Spendier uns einen Kaffee

Hinweis zu Affiliate-Links

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex