InputText

Allows user to get some text informations in one line.

version

5.0.0-alpha.32

install

yarn add @welcome-ui/input-text

usage

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

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

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

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

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

Pass an icon through to decorate your InputText.

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

Use size propety with option:

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 🪄

Property disabled can be pass to the component or Field component

Pass transparent to remove background-color and border-color

An example to put inline the input text with a label

Name	Type(s)	Default
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