InputField

InputField

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

Props

NameTypeDefaultDescription
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
defaultValuestring \| numberSpecifies the default value of the InputField. To be used with uncontrolled usage.
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
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.
valuestring \| numberSpecifies the value of the InputField. To be used with controlled usage.
helpClosablebooleantrueWhether to display help as a closable tooltip, or have it open only while the field is focused, same as error.
liststringThe id of the datalist element.
ariaAutocompleteinline \| list \| bothThe aria-autocomplete attribute of the input, see this docs.
roletextbox \| combobox \| searchboxtextboxThe role attribute of the input, see this docs.
ariaActiveDescendantstringThe aria-activedescendant attribute of the input, see this docs.
ariaHasPopupbooleanThe aria-haspopup attribute of the input, see this docs.
ariaExpandedbooleanThe aria-expanded attribute of the input, see this docs.
ariaControlsstringThe aria-controls attribute of the input, see this docs.

enum

inputModetype
"numeric""text"
"tel""number"
"decimal""email"
"email""password"
"url""passportid"
"search"
"text"
"none"

Functional specs

<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} />;
}
}

Accessibility

  • For special cases you can use your own, detached label. Simply like this:
<label for="NICEID">Content</label>
<InputField
id="NICEID"
/>