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

• InputPassword For password fields.
• Textarea For long text fields.

Usage

import { Input } from '@vtex/admin-ui'

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

  return (
    <Input
      label="Meaningful label"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  )
}

Props

Besides the props listed bellow, you can use all the props accepted by the input JSX element.

Name	Type	Description	Required	Default
label	string	Label text	✅	-
id	string	Unique id of the component	✅	-
name	string	Name of the input element.	🚫	-
helperText	string	Input helper text	🚫	-
charLimit	number	Input char limit	🚫	-
tone	neutral, critical	Tone of voice	🚫	neutral
type	tel, text, url, email	Input type	🚫	-
icon	ReactNode	Input Icon	🚫	-
suffix	string	Input Suffix	🚫	-
onClear	() => void	Handler called when the inputs value is cleared	🚫	-
buttonElements	ReactNode	Button elements	🚫	-
onChange	React.FormEventHandler<HTMLInputElement>	Handler called when the inputs value changes	🚫	-
disabled	boolean	Whether the input is disabled or not	🚫	false
criticalText	string	Input critical message	🚫	-
csx	StyleProp	Defines component styles	🚫	{}

Do’s

1. Show the exact values that the field supports.
2. Use messages, descriptions or tooltips to give more context, if needed.
3. Do use the required/optional flags when necessary, but prefer using one or another.
4. Use the Helper Text to explain in more details how the input is expected to be filled.
5. Add data validation to indicate when data hasn’t been inputted correctly.

👉 For UX Writing guidelines, access https://uxwriting.vtex.com

• Examples
  • Tone of voice
  • Icon
  • Suffix
  • Clear
  • Helpers
  • Disabled
  • Overview
  • Custom Button
• Alternatives