WUI logo

InputText

Allows user to get some text informations in one line.

version

5.0.0-alpha.16

install

yarn add @welcome-ui/input-text

usage

import { InputText } from '@welcome-ui/input-text'

Usage #

Label #

Use label and Field component to add an Label to your field

Hint #

Use hint and Field component to add an Hint to your field

Required #

Use required on Field component to add an asterix on required field

Clearable #

Use the isClearable prop to add a cross button to remove the content (value) of the TextInput

Icon #

Pass an icon through to decorate your InputText.

Use iconPlacement to put on left (default) or right.

Sizes #

Use size propety with option:

  • xs (24px)
  • sm (32px)
  • md (40px - default)
  • lg (48px)

Variants #

Use warning, error, info or success properties to add a variant status on your fields. The label, hint or border color are set by magic 🪄

Disabled #

Property disabled can be pass to the component or Field component

Transparent #

Pass transparent to remove background-color and border-color

Inline #

An example to put inline the input text with a label

Properties #

NameType(s)DefaultRequired
autoFocus
Boolean
disabled
Boolean
icon
Element
iconPlacement
"right"
"left"
left
isClearable
Boolean
name
string
onBlur
(event: FocusEvent<HTMLInputElement, Element>) => void
onChange
(event: ChangeEvent<HTMLInputElement>) => void
onFocus
(event: FocusEvent<HTMLInputElement, Element>) => void
onKeyDown
(event: KeyboardEvent<HTMLInputElement>) => void
placeholder
string
type
string
text
value
string
transparent
Boolean
size
"xs"
"sm"
"md"
"lg"
md
variant
"error"
"focused"
"info"
"success"
"warning"
hasIcon
Boolean

Packages #

Dependencies #
Peer dependencies #

Previous

Hint

Next

Label