Select

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

Props

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

Name	Type	Default	Description
dataAttrs	`Object`		Optional prop for passing `data-*` attributes to the `input` DOM element.
dataTest	`string`		Optional prop for testing purposes.
disabled	`boolean`	`false`	If `true`, the Select will be disabled.
error	`React.Node`		The error message for the Select. See Functional specs
help	`React.Node`		The help message for the Select.
id	`string`		Adds `id` HTML attribute to an element.
label	`Translation`		The label for the Select.
inlineLabel	`boolean`		If true the label renders on the left side of the Select.
name	`string`		The name for the Select.
onBlur	`event => void \\| Promise`		Function for handling onBlur event.
onChange	`event => void \\| Promise`		Function for handling onChange event.
onFocus	`event => void \\| Promise`		Function for handling onFocus event.
options	`Option[]`		The content of the Select, passed as array of objects.
placeholder	`TranslationString`		The placeholder for the Select.
prefix	`React.Node`		The prefix component for the Select. See Functional specs
ref	`func`		Prop for forwarded ref of the Select. See Functional specs
required	`boolean`	`false`	If true, the label is displayed as required.
spaceAfter	`enum`		Additional `margin-bottom` after component.
tabIndex	`string \\| number`		Specifies the tab order of an element
value	`string`	`""`	The value of the Select.
width	`string`	`100%`	Specifies width of the Select
helpClosable	`boolean`	`true`	Whether to display help as a closable tooltip, or have it open only while the field is focused, same as error.
customValueText	`string`		The custom text alternative of current value. See Functional specs.
ariaLabel	`string`		Optional prop for `aria-label` value. See Accessibility.

enum

spaceAfter
`"none"`
`"smallest"`
`"small"`
`"normal"`
`"medium"`
`"large"`
`"largest"`

Option

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

Name	Type	Description
value	`string \\| number`	The value of the Option.
label	`string`	The label for the Option.
key	`string`	The key of the Option.
disabled	`boolean`	If `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.
The prefix prop can accept any element. However, it is not recommended to pass it more than an icon (or flag).
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} />;
  }
}

Accessibility

The ariaLabel prop allows you to specify an aria-label attribute for the select 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.