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 = ""


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


@me.page(
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"]
  ),
  path="/textarea",
)
def app():
  s = me.state(State)
  me.textarea(label="Basic input", on_blur=on_blur)
  me.text(text=s.input)

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: ''
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
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