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.