WUI logo

InputText

Allows user to get some text informations in one line.

version

4.2.0

install

yarn add @welcome-ui/input-text

usage

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

Default #

function () {
const [value, setValue] = React.useState('')
const handleChange = (event) => {
setValue(event.target.value)
}
return <InputText name="firstName" placeholder="Boaty" value={value} onChange={handleChange} />
}

With Field #

function () {
const [value, setValue] = React.useState('')
const handleChange = (event) => {
setValue(event.target.value)
}
return (
<Field label="First name" required>
<InputText placeholder="Boaty" value={value} onChange={handleChange} />
</Field>
)
}

Clearable #

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

function () {
const [value, setValue] = React.useState('')
const handleChange = (event) => {
setValue(event.target.value)
}
return <InputText name="firstName2" placeholder="Boaty" value={value} onChange={handleChange} isClearable />
}

Icon #

Pass an icon through to decorate your InputText

function () {
const [value, setValue] = React.useState('')
const handleChange = (event) => {
setValue(event.target.value)
}
return <InputText icon={<AvatarIcon color="light.100" />} name="firstName3" placeholder="Boaty" value={value} onChange={handleChange} />
}

Sizes #

<Stack spacing="xl">
<InputText name="small" placeholder="Placeholder" size="sm" />
<InputText name="medium" placeholder="Placeholder" size="md" />
<InputText name="large" placeholder="Placeholder" />
</Stack>

Inline #

<Field flexDirection="row" label="First name" required>
<InputText name="firstName4" placeholder="Boaty" />
</Field>

Disabled #

<InputText disabled name="firstName5" placeholder="Boaty" />
<Field disabled label="First name" required>
<InputText name="firstName6" placeholder="Boaty" />
</Field>

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
size
"sm"
"md"
"lg"
lg
variant
"error"
"focused"
"info"
"success"
"warning"

Packages #

Dependencies #
Peer dependencies #

Previous

HookForm

Next

Label