Input

Overview

Input allows the user to type in a value and is based on the Angular Material input component.

For longer text inputs, also see Textarea

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


def load(e: me.LoadEvent):
  me.set_theme_mode("system")


@me.page(
  on_load=load,
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://google.github.io"]
  ),
  path="/input",
)
def app():
  with me.box(style=me.Style(margin=me.Margin.all(15))):
    s = me.state(State)
    me.input(label="Basic input", appearance="outline", on_blur=on_blur)
    me.text(text=s.input)

API

input

Creates a Input 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
on_enter	triggers when the browser detects an "Enter" key on a keyup native browser event. TYPE: Callable[[InputEnterEvent], Any] | None DEFAULT: None
type	Input type of the element. For textarea, use me.textarea(...) TYPE: Literal['color', 'date', 'datetime-local', 'email', 'month', 'number', 'password', 'search', 'tel', 'text', 'time', 'url', 'week'] | None DEFAULT: None
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

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

InputEnterEvent dataclass

Bases: MesopEvent

Represents an "Enter" keyboard event on an input component.

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