Offers a simple form control to select from many options.


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

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

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

<Select options={Option} />


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

customValueTextTranslationThe custom text alternative of current value. See Functional specs
dataAttrsObjectOptional prop for passing data-* attributes to the select DOM element.
dataTeststringOptional prop for testing purposes.
disabledbooleanfalseIf true, the Select will be disabled.
errorReact.NodeThe error message for the Select. See Functional specs
helpReact.NodeThe help message for the Select.
idstringAdds id HTML attribute to an element.
labelTranslationThe label for the Select.
namestringThe name for the Select.
onBlurevent => void \| PromiseFunction for handling onBlur event.
onChangeevent => void \| PromiseFunction for handling onChange event.
onFocusevent => void \| PromiseFunction for handling onFocus event.
optionsOption[]The content of the Select, passed as array of objects.
placeholderTranslationStringThe placeholder for the Select.
prefixReact.NodeThe prefix component for the Select. See Functional specs
reffuncProp for forwarded ref of the Select. See Functional specs
requiredbooleanfalseIf true, the label is displayed as required.
readOnlybooleanIf true, Select will be readonly.
sizeenum"normal"The size of the Select.
spaceAfterenumAdditional margin-bottom after component. See this docs
tabIndexstring \| numberSpecifies the tab order of an element
valuestring""The value of the Select.
widthstring100%Specifies width of the Select
helpClosablebooleantrueWhether to display help as a closable tooltip, or have it open only while the field is focused, same as error.


Table below contains all types of the props available for object in Option array.

valuestring \| numberThe value of the Option.
labelstringThe label for the Option.
keystringThe key of the Option.
disabledbooleanIf true, the Option will be disabled.



Functional specs

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

  • When you have limited space of Select, you can use customValueText property where you can pass text alternative of the current value. For instance, when label of selected option has Czech Republic (+420), you can pass only +420 into this property and the original label will be visually hidden.

  • 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 <Select ref={this.ref} />;