Offers users a simple input for a form.


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

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

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

<InputField />


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

autoCompletestringThe autocomplete attribute of the input, see this docs.
autoFocusbooleanThe autofocus attribute of the input, see this docs. Keep in mind that autofocus works only when Input is initially rendered
disabledbooleanIf true, the InputField will be disabled.
dataAttrsObjectOptional prop for passing data-* attributes to the input DOM element.
dataTeststringOptional prop for testing purposes.
errorReact.NodeThe error to display beneath the InputField. See Functional specs
tagsReact.NodeHere you can pass
component for render tags See Functional specs
helpReact.NodeThe help to display beneath the InputField.
labelTranslationThe label for the InputField. See Functional specs
idstringHTML id attribute for input.See Accessibility specs
inlineLabelbooleanIf true the label renders on the left side of input
inputModeenumThe type of data that might be entered by the user. See more here.
maxLengthnumberSpecifies the maximum number of characters allowed.
maxValuenumberSpecifies the maximum value for the InputField.
minLengthnumberSpecifies the minimum number of characters allowed.
widthstring100%Specifies the width of InputField.
minValuenumberSpecifies the minimum value for the InputField.
requiredbooleanIf true, the label is displayed as required.
namestringThe name for the InputField.
onBlurevent => void \| PromiseFunction for handling onBlur event.
onChangeevent => void \| PromiseFunction for handling onChange event.
onFocusevent => void \| PromiseFunction for handling onFocus event.
onKeyDownevent => void \| PromiseFunction for handling onKeyDown event.
onKeyUpevent => void \| PromiseFunction for handling onKeyUp event.
onMouseDownevent => void \| PromiseFunction for handling onMouseDown event.
onMouseUpevent => void \| PromiseFunction for handling onMouseUp event.
onSelectevent => void \| PromiseFunction for handling onSelect event.
placeholderstring \| (() => string))The placeholder of the InputField.
prefixReact.NodeThe prefix component for the InputField.
readOnlyboolean"false"If true, the InputField be readOnly.
reffuncProp for forwarded ref of the InputField. See Functional specs
spaceAfterenumAdditional margin-bottom after component. See this docs
sizeenum"normal"The size of the InputField.
suffixReact.NodeThe suffix component for the InputField. See Functional specs
tabIndexstring \| numberSpecifies the tab order of an element
typeenum"text"The type of the InputField.
valuestringSpecifies the value of the InputField.
helpClosablebooleantrueWhether to display help as a closable tooltip, or have it open only while the field is focused, same as error.



Functional specs

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

  • The color of the label will turn into cloud shade when the InputField has some filled value.

  • 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.:

placeholder="My placeholder"
suffix={<ButtonLink transparent icon={<Visibility />} />}
  • Usage of Tag in InputField
import Tag from "@kiwicom/orbit-components/lib/Tag";
placeholder="My placeholder"
  • 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>