This library is still in development and is available only for internal usage at VTEX.
Skip to main content

Input

Version: 0.131.0

Input

The Input is used in a form in order to retrieve data inputted by the user. It always has a label defined, and renders an <input> html element by default.

Examples

Tone of voice

The Input tone of voice is either neutral (default) or critical, and is adjustable using the tone prop.

<Stack direction="row" space="$l">
<Input label="Neutral" value="Neutral text field" helperText="Helpful text" />
<Input
tone="critical"
label="Critical"
value="Critical text field"
helperText="Helpful text"
criticalText="Something is wrong"
/>
</Stack>

Icon

You can add an Icon on the left side of the Input by defining the icon property.

function Example() {
const [value, setValue] = React.useState('')

return (
<Box csx={{ width: 300 }}>
<Input
label="Label"
icon={<IconQuestion />}
value={value}
onChange={(e) => setValue(e.target.value)}
/>
</Box>
)
}

Suffix

You can add a Suffix to the Input by defining the suffix property.

function Example() {
const [value, setValue] = React.useState('')

return (
<Box csx={{ width: 300 }}>
<Input
label="Label"
suffix="Kg"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
</Box>
)
}

Clear

You can enable a clear button by defining the onClear function.

function Example() {
const [value, setValue] = React.useState('Clear me!')

return (
<Box csx={{ width: 300 }}>
<Input
label="Label"
value={value}
onChange={(e) => setValue(e.target.value)}
onClear={() => setValue('')}
/>
</Box>
)
}

Helpers

You can add a text or a char limit count helper. You just need to define the helperText or charLimit properties.

function Example() {
const [value, setValue] = React.useState('')

return (
<Box csx={{ width: 300 }}>
<Input
label="Label"
charLimit={120}
helperText="Helper Text!"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
</Box>
)
}

Disabled

You can disable the input by defining the disabled property.

function Example() {
const [value, setValue] = React.useState('')

return (
<Box csx={{ width: 300 }}>
<Input
disabled
label="Weight"
icon={<IconPackage />}
suffix="Kg"
charLimit={10}
helperText="Add a weight!"
value={value}
onChange={(e) => setValue(e.target.value)}
onClear={() => setValue('')}
/>
</Box>
)
}

Overview

Example of Input with all of its features.

function Example() {
const [value, setValue] = React.useState('')

return (
<Box csx={{ width: 300 }}>
<Input
label="Weight"
icon={<IconPackage />}
suffix="Kg"
charLimit={10}
helperText="Add a weight!"
value={value}
onChange={(e) => setValue(e.target.value)}
onClear={() => setValue('')}
/>
</Box>
)
}

Custom Button

You can add a custom button if necessary by defining the buttonElements property.

function Example() {
const [value, setValue] = React.useState('')

return (
<Box csx={{ width: 300 }}>
<Input
buttonElements={
<Flex justify="center" align="center">
<Button
variant="neutralTertiary"
icon={<IconQuestion />}
size="small"
/>
</Flex>
}
label="Label"
charLimit={10}
helperText="Helper text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
</Box>
)
}

Alternatives