Input

An Input is a text field users can type into. It supports different text formats and numbers.

Inputs are commonly used to create forms. They can be grouped into sections in a form and are stacked vertically whenever possible. You can also use it as a single input field or search bar.

Inputs come with a descriptive label. In the case of a search function they contain a magnifier icon. Inputs can have a placeholder text to imply expected formatting, e.g. "DD/MM/YYYY".

Example

Live Editor

<form style={{ display: 'flex' }}>
  <Input
    label="Username"
    onChange={() => {}}
    css={{ marginRight: Spacing15 }}
  />
  <Input
    type="password"
    label="Password"
    infoText="The password has to have at least 8 characters"
    onChange={() => {}}
  />
</form>

<form style={{ display: 'flex' }}>
  <Input
    label="Username"
    onChange={() => {}}
    css={{ marginRight: Spacing15 }}
  />
  <Input
    type="password"
    label="Password"
    infoText="The password has to have at least 8 characters"
    onChange={() => {}}
  />
</form>

Result

Usage Rules

Do:

Use concise labels
Communicate that an input is optional by including an "optional" info after the label
Validate input after users have finished interactions with the field and not before
Indicate in the error text what the problem is and how to fix it

Don’t:

Use the field without a label
Use for long texts inputs. If users are expected to type more than one line, use a Textarea instead
Add examples or complementary information to the label
Replace the label with an error message. Use the info text instead

Variants

Autocomplete

To offer more flexibility to the users, the autoComplete property can be used.

Live Editor

<form style={{ display: 'flex' }}>
  <Input
    label="Username"
    autoComplete="off"
    onChange={() => {}}
    css={{ marginRight: Spacing15 }}
  />
  <Input
    label="Name"
    autoComplete="given-name"
    onChange={() => {}}
  />
</form>

<form style={{ display: 'flex' }}>
  <Input
    label="Username"
    autoComplete="off"
    onChange={() => {}}
    css={{ marginRight: Spacing15 }}
  />
  <Input
    label="Name"
    autoComplete="given-name"
    onChange={() => {}}
  />
</form>

Result

Clear Button

To offer functionality to remove the input term an onClear callback can be added. It displays a clear button and gets called when this button is pressed.

Live Editor

function InputWithClearButton() {
  const [inputValue, setInputValue] = useState('Peter');

  return (
    <Input
      label="With Clear button"
      value={inputValue}
      onClear={() => {
        setInputValue('');
      }}
      onChange={(e) => {
        setInputValue(e.target.value);
      }}
    />
  );
}

function InputWithClearButton() {
  const [inputValue, setInputValue] = useState('Peter');

  return (
    <Input
      label="With Clear button"
      value={inputValue}
      onClear={() => {
        setInputValue('');
      }}
      onChange={(e) => {
        setInputValue(e.target.value);
      }}
    />
  );
}

Result

Clear Button testid

You can test the clear button with the testid prop clearTestId.

Live Editor

function InputWithClearButton() {
  const [inputValue, setInputValue] = useState('Peter');

  return (
    <Input
      label="With Clear button"
      value={inputValue}
      onClear={() => {
        setInputValue('');
      }}
      onChange={(e) => {
        setInputValue(e.target.value);
      }}
      clearTestId="clear-test"
    />
  );
}

function InputWithClearButton() {
  const [inputValue, setInputValue] = useState('Peter');

  return (
    <Input
      label="With Clear button"
      value={inputValue}
      onClear={() => {
        setInputValue('');
      }}
      onChange={(e) => {
        setInputValue(e.target.value);
      }}
      clearTestId="clear-test"
    />
  );
}

Result

Custom Labelled Status Indicating

We can use indicatorCustomLabels props which needs to match the StatusIndicatorLabelTypes exported from StatusIndicator component to show custom lables, when no custom labels are passed, default props are used.

Live Editor

function inputWithCustomLabelledStatusIndicator() {
  const customLabels = {
    progress: 'Updating...',
    positive: 'Updated!',
    negative: 'Failed!'
  };

  return (
    <Input
      value="Peter"
      indicatorType="positive"
      label="Indicator"
      indicatorWithLabel
      indicatorCustomLabels={customLabels}
    />
  );
}

function inputWithCustomLabelledStatusIndicator() {
  const customLabels = {
    progress: 'Updating...',
    positive: 'Updated!',
    negative: 'Failed!'
  };

  return (
    <Input
      value="Peter"
      indicatorType="positive"
      label="Indicator"
      indicatorWithLabel
      indicatorCustomLabels={customLabels}
    />
  );
}

Result

Default value

You can set the initial input content with passing defaultValue.

Live Editor

<Input label="Name" defaultValue="Atlas" />

<Input label="Name" defaultValue="Atlas" />

Result

Disabled

Live Editor

<Input label="Disabled" value="Peter" disabled />

<Input label="Disabled" value="Peter" disabled />

Result

Info Text

Use an info text to give specific instructions to help users correctly fill in the data. You can also use it to clarify how the data will be used.

When validating data, use the info text to display the error message.

warning

When on firefox, the input and infoText will take full width by default. If you need the input to have a fixed width and the infoText to wrap to a second line, please either add css={} prop, a wrapper element with a fixed width, or a fixed width to the <form> element.

Live Editor

<>
  <Input infoText="Info text" label="Input with info text" />
  <Input infoText="Error text" label="Input with error text" invalid />
</>

<>
  <Input infoText="Info text" label="Input with info text" />
  <Input infoText="Error text" label="Input with error text" invalid />
</>

Result

You can change the position of the info text to be on top of the input.

warning

Please avoid using the Info Text on top of the input when you also need the optional label.

Live Editor

<>
  <Input infoText="Info text" infoTextTop label="Input with info text" />
  <Input
    infoText="Info text really long that goes on to a second line"
    infoTextTop
    label="Input with info text"
  />
</>

<>
  <Input infoText="Info text" infoTextTop label="Input with info text" />
  <Input
    infoText="Info text really long that goes on to a second line"
    infoTextTop
    label="Input with info text"
  />
</>

Result

We also support text tags inside the Info Text. Like strong, b, i and a.

Live Editor

function InfoText() {
  const infoText = `Info <b>text</b> really <i>long</i> that <a href='#'> goes </a> on to a <strong> second </strong>line`;

  return <Input infoText={infoText} label="Input with info text" />;
}

function InfoText() {
  const infoText = `Info <b>text</b> really <i>long</i> that <a href='#'> goes </a> on to a <strong> second </strong>line`;

  return <Input infoText={infoText} label="Input with info text" />;
}

Result

Label

Always include a label to let users know what the input is for.

Live Editor

<Input label="Label" />

<Input label="Label" />

Result

You can add extra piece of information to the label by including a tooltip.

Live Editor

<Input
  label="Label"
  labelIconTooltip={{
    content: 'hello',
    position: 'top'
  }}
/>

<Input
  label="Label"
  labelIconTooltip={{
    content: 'hello',
    position: 'top'
  }}
/>

Result

Prefix

In some cases, we need some prefix to stand out from the actual value. For this, we have the prefix property which comes before the typing area.

Live Editor

<Input label="Price" prefix="EUR" value="420,00" />

<Input label="Price" prefix="EUR" value="420,00" />

Result

Ref

Access input native element using ref.

Live Editor

function refTest() {
  const inputRef = React.createRef();
  const handleChange = () => {
    inputRef.current.style.backgroundColor = 'lavender';
  };

  return (
    <Input
      id="input-ref"
      ref={inputRef}
      onChange={handleChange}
      label="Type somthing..."
    />
  );
}

function refTest() {
  const inputRef = React.createRef();
  const handleChange = () => {
    inputRef.current.style.backgroundColor = 'lavender';
  };

  return (
    <Input
      id="input-ref"
      ref={inputRef}
      onChange={handleChange}
      label="Type somthing..."
    />
  );
}

Result

Search

Setting the input type to search displays a search icon in the input.

Live Editor

function SearchInput() {
  const [inputValue, setInputValue] = useState('Peter');

  return (
    <Input
      label="Search"
      type="search"
      value={inputValue}
      onClear={() => {
        setInputValue('');
      }}
      onChange={(e) => {
        setInputValue(e.target.value);
      }}
    />
  );
}

function SearchInput() {
  const [inputValue, setInputValue] = useState('Peter');

  return (
    <Input
      label="Search"
      type="search"
      value={inputValue}
      onClear={() => {
        setInputValue('');
      }}
      onChange={(e) => {
        setInputValue(e.target.value);
      }}
    />
  );
}

Result

Status Indicating

Live Editor

<Input value="Peter" indicatorType="positive" label="Indicator" />

<Input value="Peter" indicatorType="positive" label="Indicator" />

Result

Input field Status Indicator withLabel, here you can see defautlLabels for indicatorType.

progress: 'Saving….', positive: 'Saved!', negative: 'Disconnected!'

Live Editor

<Input
  value="Peter"
  indicatorType="positive"
  indicatorWithLabel
  label="Indicator"
/>

<Input
  value="Peter"
  indicatorType="positive"
  indicatorWithLabel
  label="Indicator"
/>

Result

Suffix

In some cases, we need some suffix to stand out from the actual value. For this, we have the suffix property which comes after the typing area.

Live Editor

<Input label="Price" suffix="$" value="420,00" />

<Input label="Price" suffix="$" value="420,00" />

Result

Optional field

You can show the field as optional or custom text by using the optionalText prop as string.

Live Editor

<Input id="input" label="Label" optionalText="optional" />

<Input id="input" label="Label" optionalText="optional" />

Result

Input field custom styling

Using inputFieldCss prop you can customise the input field using textTransform options uppercase, lowercase or capitalize.

Live Editor

function inputFieldCss() {
  const handleTextTransform = (data) => {
    if (data.id === 'toUppercase') {
      return { textTransform: 'uppercase' };
    }
    if (data.id === 'capitalize') {
      return { textTransform: 'capitalize' };
    }
    return { textTransform: 'lowercase' };
  };

  return [
    { id: 'toUppercase', label: 'uppercase' },
    { id: 'toLowerCase', label: 'lowercase' },
    { id: 'capitalize', label: 'capitalize' }
  ].map((data) => (
    <Input
      id={data.id}
      label={data.label}
      inputFieldCss={handleTextTransform(data)}
    />
  ));
}

function inputFieldCss() {
  const handleTextTransform = (data) => {
    if (data.id === 'toUppercase') {
      return { textTransform: 'uppercase' };
    }
    if (data.id === 'capitalize') {
      return { textTransform: 'capitalize' };
    }
    return { textTransform: 'lowercase' };
  };

  return [
    { id: 'toUppercase', label: 'uppercase' },
    { id: 'toLowerCase', label: 'lowercase' },
    { id: 'capitalize', label: 'capitalize' }
  ].map((data) => (
    <Input
      id={data.id}
      label={data.label}
      inputFieldCss={handleTextTransform(data)}
    />
  ));
}

Result

Props

Name	Type	Default
disabled Native HTML attribute: Link	boolean	—
type The type of the input	"number" \| "url" \| "text" \| "search" \| "email" \| "password" \| "tel"	"text"
css Add custom styles to this component. Use with caution. Learn more here: Link	SupportedStyleAttributes	—
inputFieldCss	SupportedStyleAttributes	—
label The visual label of the input	string	—
aria-label Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link	string	—
aria-labelledby Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link	string	—
id Native HTML attribute: Link . Internally, this component uses a random id. We use it to associate an input with a label element. As the random id might break snapshot tests it can be overridden by setting an explicit id.	string	—
onFocus Native HTML callback: Link	FocusEventHandler<HTMLInputElement>	—
onBlur Native HTML callback: Link	FocusEventHandler<HTMLInputElement>	—
onKeyDown Native HTML callback: Link	KeyboardEventHandler<HTMLInputElement>	—
required Native HTML attribute: Link	boolean	—
readOnly Native HTML attribute: Link	boolean	—
onChange Native HTML callback: Link	ChangeEventHandler<HTMLInputElement>	—
value The input's value	string \| number	—
autoFocus Native HTML attribute: Link	boolean	—
name Native HTML attribute: Link	string	—
placeholder Native HTML attribute: Link	string	—
onClear Adding this callback function will render a button to clear the input field	(() => void)	—
infoText Instructions to help users correctly fill in the data	string	—
optionalText optionalText value to show the field is optional with custom text	string	—
autoComplete Native HTML attribute: Link	string	—
infoTextTop positions the infoText on top of the input	boolean	—
defaultValue The input's defaultValue	string \| number	—
indicatorType The prop for indicatorType which is required to enable the indicator and shows the status based on its given type without label.	"negative" \| "positive" \| "warning" \| "progress"	—
indicatorCustomLabels The prop for status indicator with custom labels with StatusIndicatorLabelTypes, if not passed uses default props that can be exported from StatusIndicator component.	StatusIndicatorLabelTypes	—
indicatorWithLabel This prop enables the display of a label next the status indicator. If no custom label is passed, it uses the default labels.	boolean	—
invalid Visually notify the user that the provided value is invalid	boolean	—
min Native HTML attribute: Link	string \| number	—
max Native HTML attribute: Link	string \| number	—
step Native HTML attribute: Link	string \| number	—
minLength Native HTML attribute: Link	number	—
maxLength Native HTML attribute: Link	number	—
labelIconTooltip The labelIconTooltip content can either be pure text or any rich content wrapped in a React component The labelIconTooltip content will be shown when hovering the label icon. The labelIconTooltip position is used to define the positioning of the tooltip When the labelIconTooltip content is not provided, the label icon will be not shown.	Omit<TooltipProps, "children">	—
prefix Add a prefix to an input field	string	—
suffix Add a suffix to an input field	string	—
clearTestId Data testid for the clear button	string	"clear-btn-test-id"
ref	Ref<HTMLInputElement>	—
key	Key \| null	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

Textarea

Example​

Usage Rules​

Do:​

Don’t:​

Variants​

Autocomplete​

Clear Button​

Clear Button testid​

Custom Labelled Status Indicating​

Default value​

Disabled​

Info Text​

warning

warning

Label​

Prefix​

Ref​

Search​

Status Indicating​

Suffix​

Optional field​

Input field custom styling​

Props​

Related Components​

Example

Usage Rules

Do:

Don’t:

Variants

Autocomplete

Clear Button

Clear Button testid

Custom Labelled Status Indicating

Default value

Disabled

Info Text

Label

Prefix

Ref

Search

Status Indicating

Suffix

Optional field

Input field custom styling

Props

Related Components