Components
Text Input

Text Input

TextInput is used to set a value that is a single line of text.

Empty
Họ và tên
Help message
Họ và tên
Help message
Filled
Họ và tên
Help message
Họ và tên
Help message
With clear button
Họ và tên
Họ và tên
Help message
Error
Họ và tên
Họ và tên
Error message
Disabled
Họ và tên
Họ và tên
Help message

Usage

import { TextInput } from "@momo-webplatform/mobase";
<TextInput label="Họ và tên" placeholder="Placeholder text" />

API Reference

TextInput component extends HTML Input Element and supports all of its props.

TextInput
PropTypeDefaultRequired
label
string--false
message
string--false
isError
enumboolean--false
inputClassName
string--false
withClearButton
enumboolean--false
size
enum1 | 2--false
onClickClear
(inputValue: string) => void--false

Best practices

  • Use a TextInput to allow users to input short free-form text. It may also be used as a number input when type="number" is passed to the component.
  • Status:
    • Focused: The input has been navigated to and is ready to accept input.
    • Error: The value failed validation.
    • Disabled: The input cannot accept input or become focused.