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

Text Area

rx.text_area

Offizielle Doku

Werkstattauftrag

Bitte setz auf der Bestelldetailseite ein Feld für Bewertungen ein. Höchstens 200 Zeichen, die restlichen Zeichen sollen sichtbar sein, und mit Enter soll man direkt posten können.

rx.text_area ist ein mehrzeiliges Eingabefeld. Du nimmst es für Texte mit Zeilenumbrüchen wie Kommentare, Anfragen oder Notizen. Die Bedienung entspricht weitgehend rx.input; dazu kommen Zeilenzahl (rows), Größenänderung (resize) und automatische Höhe (auto_height).

rx.text_area(placeholder="Type here...")

Props ausprobieren

Schalte auto_height ein und schreib mehrere Zeilen: Das Feld wächst mit dem Text. resize legt fest, in welche Richtung Nutzer das Feld am Griff unten rechts ziehen dürfen.

Props ausprobieren

placeholder

rows

resize

variant

size

color

radius

auto_height

disabled

rx.text_area(placeholder="Write a comment...", rows="3", resize="vertical", variant="surface", size="2", color_scheme="indigo", radius="medium", auto_height=False, disabled=False)

rows ist die anfangs sichtbare Zeilenzahl, resize die Richtung, in die Nutzer vergrößern dürfen. variant · size · radius funktionieren wie bei Input.

Prop	Werte	Standard	Verwendung
`placeholder`	String	keiner	Hinweistext, solange das Feld leer ist
`value` / `default_value`	String	keiner	Gesteuerter Wert / Wert, der nur einmal am Anfang gesetzt wird
`rows`, `cols`	Zahl als String	Browserwert	Anfangs sichtbare Zeilen, Breite in Zeichen
`resize`	`"none"` `"vertical"` `"horizontal"` `"both"`	Theme-Wert	Richtung, in die Nutzer die Größe ändern dürfen
`auto_height`	`True` / `False`	`False`	Höhe wächst mit der Textlänge (zusammen mit `min_height`)
`enter_key_submit`	`True` / `False` / Var	`False`	Enter sendet das Formular ab, Shift+Enter bricht die Zeile um
`variant`, `size`, `color_scheme`, `radius`	wie bei Input		Aussehen
`name`, `required`, `max_length`, `min_length`		keiner	Name beim Absenden und Prüfung durch den Browser
`disabled`, `read_only`, `auto_focus`	`True` / `False`	`False`	Sperren, nur lesen, Autofokus
`on_change`, `on_blur`	Event		Wenn sich der Wert ändert / der Fokus verloren geht. Übergibt den Wert
`on_key_down`, `on_key_up`	Event		Wenn eine Taste gedrückt / losgelassen wird

Grundform: Wert per on_blur empfangen

Wie bei Input übergibt on_blur beim Verlassen des Felds einmal den bis dahin geschriebenen Text. Mit value und on_change zusammen wird es eine gesteuerte Eingabe, und auch hier kommt das Entprellen automatisch dazu.

Hello World!

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

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


rx.vstack(
    rx.heading(TextAreaBlurState.text, size="4"),
    rx.text_area(placeholder="Type, then click outside", on_blur=TextAreaBlurState.set_text),
    width="100%",
)

Im Formular

In den Formulardaten wird name zum Schlüssel. Unten steht das Feedback-Formular aus der offiziellen Doku. Das Feld hält der State über value + on_change, und nach dem Absenden wechselt rx.cond zu einer Dankeskarte. Wegen required=True lässt sich kein leerer Text senden.

class TextAreaFeedbackState(rx.State):
    feedback: str = ""
    submitted: bool = False

    @rx.event
    def set_feedback(self, value: str):
        self.feedback = value

    @rx.event
    def submit_feedback(self, form_data: dict):
        self.submitted = True

    @rx.event
    def reset_form(self):
        self.feedback = ""
        self.submitted = False


rx.cond(
    TextAreaFeedbackState.submitted,
    rx.card(
        rx.vstack(
            rx.text("Thank you! You wrote:"),
            rx.blockquote(TextAreaFeedbackState.feedback),
            rx.button("Submit another response", on_click=TextAreaFeedbackState.reset_form),
        ),
    ),
    rx.card(
        rx.form(
            rx.flex(
                rx.text("Are you enjoying Reflex?"),
                rx.text_area(
                    name="feedback",
                    placeholder="Write your feedback...",
                    value=TextAreaFeedbackState.feedback,
                    on_change=TextAreaFeedbackState.set_feedback,
                    resize="vertical",
                    required=True,
                ),
                rx.button("Send", type="submit"),
                direction="column",
                spacing="3",
            ),
            on_submit=TextAreaFeedbackState.submit_feedback,
        ),
    ),
)

Mit Enter absenden

In einem mehrzeiligen Feld bedeutet Enter normalerweise Zeilenumbruch. Mit enter_key_submit=True sendet Enter das umgebende Formular ab, und Shift+Enter bricht die Zeile um. Die Prop nimmt auch eine Var, daher lässt sie sich wie unten per Switch an- und ausschalten. Um sie während der Verarbeitung abzuschalten, schreibst du etwa enter_key_submit=~State.is_loading.

enter_key_submit nutzt einen eigenen Tasten-Handler und lässt sich deshalb nicht mit on_key_down kombinieren (sonst gibt es einen ValueError). Ein Python-Handler für on_key_down bekommt ohnehin nur den Tastennamen und kann den Zeilenumbruch nicht verhindern. Brauchst du beides, musst du es im Browser lösen, etwa mit rx.call_script.

Enter submits

Nothing submitted yet.

class TextAreaEnterState(rx.State):
    submitted_text: str = ""
    enter_submits: bool = True

    @rx.event
    def handle_submit(self, form_data: dict):
        self.submitted_text = form_data.get("message", "")

    @rx.event
    def set_enter_submits(self, value: bool):
        self.enter_submits = value


rx.vstack(
    rx.hstack(
        rx.switch(checked=TextAreaEnterState.enter_submits, on_change=TextAreaEnterState.set_enter_submits),
        rx.text("Enter submits", size="2"),
        align="center",
    ),
    rx.form(
        rx.text_area(
            name="message",
            placeholder="Type and press Enter (Shift+Enter for a new line)",
            enter_key_submit=TextAreaEnterState.enter_submits,
        ),
        on_submit=TextAreaEnterState.handle_submit,
        reset_on_submit=True,
        width="100%",
    ),
    rx.cond(
        TextAreaEnterState.submitted_text != "",
        rx.text("Submitted: ", rx.code(TextAreaEnterState.submitted_text)),
        rx.text("Nothing submitted yet.", color_scheme="gray"),
    ),
    width="100%",
)

Automatische Höhe

Mit auto_height=True wächst das Feld mit dem Text, statt innen zu scrollen. Zusammen mit rows="1" und min_height="0" beginnt es einzeilig und wächst dann. Damit es nicht zu groß wird, setzt du max_height. Das Beispiel unten stoppt bei 160px.

rx.text_area(
    placeholder="Type a few lines - the box grows to fit",
    auto_height=True,
    rows="1",
    min_height="0",
    max_height="160px",
    width="100%",
)

Auftrag erledigt

Über value + on_change hält der State den Text, und die berechnete Variable left zeigt die restlichen Zeichen. max_length begrenzt die Länge im Browser, [:200] noch einmal auf dem Server. Beim Speichern wird der Wert aus form_data genommen, damit keine Zeichen fehlen, die wegen des Entprellens noch nicht im State angekommen sind. auto_height lässt das Feld wachsen, und dank enter_key_submit wird mit Enter gepostet.

class TextAreaReviewState(rx.State):
    review: str = ""
    saved: str = ""

    @rx.event
    def set_review(self, value: str):
        self.review = value[:200]

    @rx.event
    def save(self, form_data: dict):
        self.saved = form_data.get("review", "")[:200]
        self.review = ""

    @rx.var
    def left(self) -> int:
        return 200 - len(self.review)


rx.form(
    rx.vstack(
        rx.text_area(
            name="review",
            placeholder="How was your order?",
            value=TextAreaReviewState.review,
            on_change=TextAreaReviewState.set_review,
            max_length=200,
            auto_height=True,
            rows="2",
            min_height="0",
            enter_key_submit=True,
            width="100%",
        ),
        rx.hstack(
            rx.text(TextAreaReviewState.left, " characters left", size="1", color_scheme="gray"),
            rx.spacer(),
            rx.button("Post review", type="submit", disabled=TextAreaReviewState.review == ""),
            width="100%",
            align="center",
        ),
        rx.cond(TextAreaReviewState.saved != "", rx.callout(TextAreaReviewState.saved, icon="message-square")),
        width="100%",
    ),
    on_submit=TextAreaReviewState.save,
    width="100%",
    max_width="460px",
)

Werkstattnotizen

rx.text_area ist die mehrzeilige Eingabe. Bedienung wie rx.input (on_blur, value + on_change).
rows legt die anfängliche Zeilenzahl fest, resize die Richtung, in die Nutzer vergrößern dürfen.
auto_height=True + rows="1" + min_height="0" lässt das Feld mit dem Text wachsen. Obergrenze per max_height.
Mit enter_key_submit=True sendet Enter ab, Shift+Enter bricht um. Nicht mit on_key_down kombinierbar.
Im Formular ist name der Schlüssel; required · max_length prüft der Browser.

← Zurück

Formulare · Input

Weiter →

Formulare · Checkbox

Ü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