Textarea

Overview

Textarea allows the user to type in a value and is based on the Angular Material input component for <textarea>.

This is similar to Input, but Textarea is better suited for long text inputs.

Examples

import mesop as me


@me.stateclass
class State:
  input: str = ""
  output: str = ""


def on_blur(e: me.InputBlurEvent):
  state = me.state(State)
  state.input = e.value
  state.output = e.value


def on_newline(e: me.TextareaShortcutEvent):
  state = me.state(State)
  state.input = e.value + "\n"


def on_submit(e: me.TextareaShortcutEvent):
  state = me.state(State)
  state.input = e.value
  state.output = e.value


def on_clear(e: me.TextareaShortcutEvent):
  state = me.state(State)
  state.input = ""
  state.output = ""


@me.page(
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"]
  ),
  path="/textarea",
)
def app():
  s = me.state(State)
  with me.box(style=me.Style(margin=me.Margin.all(15))):
    me.text(
      "Press enter to submit.",
      style=me.Style(margin=me.Margin(bottom=15)),
    )
    me.text(
      "Press shift+enter to create new line.",
      style=me.Style(margin=me.Margin(bottom=15)),
    )
    me.text(
      "Press shift+meta+enter to clear text.",
      style=me.Style(margin=me.Margin(bottom=15)),
    )
    me.textarea(
      label="Basic input",
      value=s.input,
      on_blur=on_blur,
      shortcuts={
        me.Shortcut(key="enter"): on_submit,
        me.Shortcut(shift=True, key="ENTER"): on_newline,
        me.Shortcut(shift=True, meta=True, key="Enter"): on_clear,
      },
    )
    me.text(text=s.output)

API

textarea

Creates a Textarea component.

PARAMETER	DESCRIPTION
label	Label for input. TYPE: str DEFAULT: ''
on_blur	blur is fired when the input has lost focus. TYPE: Callable[[InputBlurEvent], Any] | None DEFAULT: None
on_input	input is fired whenever the input has changed (e.g. user types). Note: this can cause performance issues. Use on_blur instead. TYPE: Callable[[InputEvent], Any] | None DEFAULT: None
autosize	If True, the textarea will automatically adjust its height to fit the content, up to the max_rows limit. TYPE: bool DEFAULT: False
min_rows	The minimum number of rows the textarea will display. TYPE: int | None DEFAULT: None
max_rows	The maximum number of rows the textarea will display. TYPE: int | None DEFAULT: None
rows	The number of lines to show in the text area. TYPE: int DEFAULT: 5
appearance	The form field appearance style. TYPE: Literal['fill', 'outline'] DEFAULT: 'fill'
style	Style for input. TYPE: Style | None DEFAULT: None
disabled	Whether it's disabled. TYPE: bool DEFAULT: False
placeholder	Placeholder value TYPE: str DEFAULT: ''
required	Whether it's required TYPE: bool DEFAULT: False
value	Initial value. TYPE: str DEFAULT: ''
readonly	Whether the element is readonly. TYPE: bool DEFAULT: False
hide_required_marker	Whether the required marker should be hidden. TYPE: bool DEFAULT: False
color	The color palette for the form field. TYPE: Literal['primary', 'accent', 'warn'] DEFAULT: 'primary'
float_label	Whether the label should always float or float as the user types. TYPE: Literal['always', 'auto'] DEFAULT: 'auto'
subscript_sizing	Whether the form field should reserve space for one line of hint/error text (default) or to have the spacing grow from 0px as needed based on the size of the hint/error content. Note that when using dynamic sizing, layout shifts will occur when hint/error text changes. TYPE: Literal['fixed', 'dynamic'] DEFAULT: 'fixed'
hint_label	Text for the form field hint. TYPE: str DEFAULT: ''
shortcuts	Shortcut events to listen for. TYPE: dict[Shortcut, Callable[[TextareaShortcutEvent], Any]] | None DEFAULT: None
key	The component key. TYPE: str | None DEFAULT: None

native_textarea

Creates a browser native Textarea component. Intended for advanced use cases with maximum UI control.

PARAMETER	DESCRIPTION
on_blur	blur is fired when the input has lost focus. TYPE: Callable[[InputBlurEvent], Any] | None DEFAULT: None
on_input	input is fired whenever the input has changed (e.g. user types). Note: this can cause performance issues. Use on_blur instead. TYPE: Callable[[InputEvent], Any] | None DEFAULT: None
autosize	If True, the textarea will automatically adjust its height to fit the content, up to the max_rows limit. TYPE: bool DEFAULT: False
min_rows	The minimum number of rows the textarea will display. TYPE: int | None DEFAULT: None
max_rows	The maximum number of rows the textarea will display. TYPE: int | None DEFAULT: None
style	Style for input. TYPE: Style | None DEFAULT: None
disabled	Whether it's disabled. TYPE: bool DEFAULT: False
placeholder	Placeholder value TYPE: str DEFAULT: ''
value	Initial value. TYPE: str DEFAULT: ''
readonly	Whether the element is readonly. TYPE: bool DEFAULT: False
shortcuts	Shortcut events to listen for. TYPE: dict[Shortcut, Callable[[TextareaShortcutEvent], Any]] | None DEFAULT: None
key	The component key. TYPE: str | None DEFAULT: None

InputBlurEvent dataclass

Bases: MesopEvent

Represents an inpur blur event (when a user loses focus of an input).

ATTRIBUTE	DESCRIPTION
value	Input value. TYPE: str
key	key of the component that emitted this event. TYPE: str

InputEvent dataclass

Bases: MesopEvent

Represents a user input event.

ATTRIBUTE	DESCRIPTION
value	Input value. TYPE: str
key	key of the component that emitted this event. TYPE: str