InputText
Allows user to get some text informations in one line.
version
5.6.1
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 #
Name | Type(s) | Default | Required |
---|---|---|---|
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 |