To implement the InputField component into your project you’ll need to add the import:

import InputField from "@kiwicom/orbit-components/lib/InputField";

After adding import to your project you can use it simply like:

<InputField />

The table below contains all types of props available in the InputField component.

• The error prop overwrites the help prop, due to higher priority.

• You can use string for currency InputField, or React.Node for InputField with icon.

• If you want to use ButtonLink as suffix for the InputField, use transparent prop for the ButtonLink, e.g.:

<InputField
  placeholder="My placeholder"
  suffix={<ButtonLink transparent icon={<Visibility />} />}
/>

• Usage of Tag in InputField

import Tag from "@kiwicom/orbit-components/lib/Tag";
<InputField
  placeholder="My placeholder"
  tags={
    <div>
      <Tag>Brno</Tag>
      <Tag>Praha</Tag>
    </div>
  }
/>;

• ref can be used for example auto-focus the elements immediately after render.

class Component extends React.PureComponent<Props> {
  componentDidMount() {
    this.ref.current && this.ref.current.focus();
  }
  ref: { current: React.ElementRef<*> | null } = React.createRef();
  render() {
    return <InputField ref={this.ref} />;
  }
}

• For special cases you can use your own, detached label. Simply like this:

<label for="NICEID">Content</label>
<InputField
  id="NICEID"
/>

• The ariaLabel prop allows you to specify an aria-label attribute for the InputField component. This attribute provides additional information to screen readers, enhancing the accessibility of the component. By using ariaLabel, you can ensure that users who rely on assistive technologies receive the necessary context and information about the component’s purpose and functionality.
• If the label prop is not provided, the ariaLabel prop must be specified to ensure component accessibility.