InputSelect

InputSelect

import InputSelect from "@kiwicom/orbit-components/lib/InputSelect";
const options = [
{
title: "Option 1",
value: 1,
description: "Description for option 1",
},
{
title: "Option 2",
value: 2,
description: "Description for option 2",
},
...
];
<InputSelect options={options} />;

Groups

const options = [
{
title: "Option 1",
value: 1,
description: "Description for option 1",
},
{
title: "Option 2",
value: 2,
description: "Description for option 2",
group: "Group name"
},
...
];

Props

NameTypeDefaultDescription
optionsOption[]Required. The content of the InputSelect, passed as array of objects.
defaultSelectedOptionDefault selected option. Must be one of the options passed on the options prop.
prevSelectedOptionThis displays the previously selected option on top of every other options.
prevSelectedLabelstring"Previously selected"The label to be displayed before the previously selected option.
dataAttrsObjectOptional prop for passing data-* attributes to the input DOM element.
dataTeststringOptional prop for testing purposes.
disabledbooleanfalseIf true, the InputSelect will be disabled.
errorReact.NodeThe error message for the InputSelect.
helpReact.NodeThe help message for the InputSelect.
idstringAdds id HTML attribute to an element.
labelTranslationThe label for the InputSelect.
namestringThe name for the InputSelect.
onBlurevent => void \| PromiseFunction for handling onBlur event.
onChangeevent => void \| PromiseFunction for handling onChange event on the text input. For option selection change, use onOptionSelect.
onFocusevent => void \| PromiseFunction for handling onFocus event.
onKeyDownevent => void \| PromiseFunction for handling onKeyDown event.
onKeyUpevent => void \| PromiseFunction for handling onKeyUp event.
onMouseUpevent => void \| PromiseFunction for handling onMouseUp event.
onMouseDownevent => void \| PromiseFunction for handling onMouseDown event.
placeholderTranslationStringThe placeholder for the InputSelect.
reffuncProp for forwarded ref of the InputSelect.
requiredbooleanfalseIf true, the label is displayed as required.
readOnlybooleanIf true, InputSelect will be readonly.
tabIndexstring \| numberSpecifies the tab order of an element.
widthstring100%Specifies width of the InputSelect.
maxWidthstringSpecifies max-width of the InputSelect.
maxHeightstring400pxSpecifies max height of the dropdown with results for InputSelect.
onOptionSelect(opt: Option \| null) => voidCallback that fires when an option is selected.
onClose(opt: Option \| null) => voidCallback that fires when the list of options is closed by other means than selecting an option. It is called with the value of the selected or null, if nothing is selected.
helpClosablebooleantrueWhether to display help as a closable tooltip, or have it open only while the field is focused, same as error.
emptyStateReact.Node"No results found."Message to display when no options are available. If a string is passed, paddings are automatically applied.
labelClosestringCloseThe label for the close button in the dropdown.
showAllbooleantrueIf set to true, it will display all options at the end of the list. If set to false, it will display only the options without a group at the end of the list.
showAllLabelstring"All options" \| "Other options"The label displayed before showing the last group of options. If showAll is true, the default value is "All options". If it is false, the default value is "Other options".
insideInputGroupbooleanfalseIf true, the InputSelect will be rendered inside InputGroup.

Option

NameTypeDescription
titlestringRequired. The title of the Option.
valuestring \| numberRequired. The value of the Option. Should be unique in each option on the array of options passed to InputSelect.
descriptionstringThe description of the Option.
groupstringThe group of the Option.
prefixReact.NodeA prefix to the title. Can be an icon, flag, etc.