README
SelectInput
Description
An input component getting a selection from the user.
Installation
yarn add @commercetools-uikit/select-input
npm --save install @commercetools-uikit/select-input
Additionally install the peer dependencies (if not present)
yarn add react react-intl
npm --save install react react-intl
Usage
import PropTypes from 'prop-types';
import SelectInput from '@commercetools-uikit/select-input';
const Example = (props) => (
<SelectInput
name="form-field-name"
value={props.value}
onChange={
(/** event */) => {
// console.log(event.target.value)
}
}
options={[
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' },
]}
/>
);
Example.propTypes = {
value: PropTypes.string,
};
export default Example;
Properties
Props | Type | Required | Default | Description |
---|---|---|---|---|
horizontalConstraint |
union Possible values: , 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto' |
|||
hasError |
boolean |
Indicates that input has errors | ||
isReadOnly |
boolean |
Is the select read-only | ||
hasWarning |
boolean |
Control to indicate on the input if there are selected values that are potentially invalid | ||
iconLeft |
ReactNode |
Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled. | ||
aria-label |
ReactSelectProps['aria-label'] |
Aria label (for assistive tech)
Props from React select was used |
||
aria-labelledby |
ReactSelectProps['aria-labelledby'] |
HTML ID of an element that should be used as the label (for assistive tech)
Props from React select was used |
||
isAutofocussed |
boolean |
Focus the control when it is mounted | ||
backspaceRemovesValue |
ReactSelectProps['backspaceRemovesValue'] |
Remove the currently focused option when the user presses backspace
Props from React select was used |
||
components |
ReactSelectProps['components'] |
Map of components to overwrite the default ones, see what components you can override
Props from React select was used |
||
filterOption |
ReactSelectProps['filterOption'] |
Custom method to filter whether an option should be displayed in the menu
Signature: (option, rawInput) => boolean
Props from React select was used |
||
id |
ReactSelectProps['inputId'] |
Used as HTML id property. An id is generated automatically when not provided.
This forwarded as react-select's "inputId"
Props from React select was used |
||
inputValue |
ReactSelectProps['inputValue'] |
The value of the search input
Props from React select was used |
||
containerId |
ReactSelectProps['id'] |
The id to set on the SelectContainer component
This is forwarded as react-select's "id"
Props from React select was used |
||
isClearable |
ReactSelectProps['isClearable'] |
Is the select value clearable
Props from React select was used |
||
isDisabled |
ReactSelectProps['isDisabled'] |
Is the select disabled
Props from React select was used |
||
isOptionDisabled |
ReactSelectProps['isOptionDisabled'] |
Override the built-in logic to detect whether an option is disabled
Props from React select was used |
||
isMulti |
ReactSelectProps['isMulti'] |
Support multiple selected options
Props from React select was used |
||
isSearchable |
ReactSelectProps['isSearchable'] |
Whether to enable search functionality
Props from React select was used |
||
maxMenuHeight |
ReactSelectProps['maxMenuHeight'] |
220 |
Maximum height of the menu before scrolling
Props from React select was used |
|
menuPortalTarget |
ReactSelectProps['menuPortalTarget'] |
Dom element to portal the select menu to
Props from React select was used |
||
menuPortalZIndex |
number |
1 |
z-index value for the menu portal | |
menuShouldBlockScroll |
ReactSelectProps['menuShouldBlockScroll'] |
whether the menu should block scroll while open
Props from React select was used |
||
closeMenuOnSelect |
ReactSelectProps['closeMenuOnSelect'] |
Whether the menu should close after a value is selected. Defaults to true .
Props from React select was used |
||
name |
ReactSelectProps['name'] |
Name of the HTML Input (optional - without this, no input will be rendered)
Props from React select was used |
||
noOptionsMessage |
ReactSelectProps['noOptionsMessage'] |
Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with { inputValue: String }.
inputValue will be an empty string when no search text is present.
Signature: ({ inputValue}) => string
Props from React select was used |
||
onBlur |
Function See signature. |
Handle blur events on the control
Signature: (event) => void |
||
onChange |
Function See signature. |
Called with a fake event when value changes. The event's target.name will be the name supplied in props. The event's target.value will hold the value.
The value will be the selected option, or an array of options in case isMulti is true. Signature: (event) => void |
||
onFocus |
ReactSelectProps['onFocus'] |
Handle focus events on the control
Signature: (event) => void
Props from React select was used |
||
onInputChange |
ReactSelectProps['onInputChange'] |
Handle change events on the input
Signature: (newValue, actionMeta) => void
Props from React select was used |
||
options |
union Possible values: TOption[] , TOptionObject[] |
Array of options that populate the select menu | ||
showOptionGroupDivider |
boolean |
|||
placeholder |
ReactSelectProps['placeholder'] |
Placeholder text for the select value
Props from React select was used |
||
tabIndex |
ReactSelectProps['tabIndex'] |
Sets the tabIndex attribute on the input
Props from React select was used |
||
tabSelectsValue |
ReactSelectProps['tabSelectsValue'] |
Select the currently focused option when the user presses tab
Props from React select was used |
||
value |
ReactSelectProps['value'] |
The value of the select; reflected by the selected option
Props from React select was used |
Signatures
onBlur
Signature (event: TEvent) => void
onChange
Signature (event: TEvent) => void
under the hood react-select
This input is built on top of react-select
v2.
It supports mostly same properties as react-select
. Behaviour for some props was changed, and support for others was dropped.
In case you need one of the currently excluded props, feel free to open a PR adding them.
options
The options support a isDisabled
property which will render the option with a disabled style and will prevent users from selecting it.
Static Properties
isTouched(touched)
Expects to be called with an array or boolean.
Returns true
when truthy.
Components
It is possible to customize SelectInput
by passing the components
property.
SelectInput
exports the default underlying components as static exports.
Components available as static exports are:
ClearIndicator
Control
DropdownIndicator
DownChevron
CrossIcon
Group
GroupHeading
IndicatorsContainer
IndicatorSeparator
Input
LoadingIndicator
Menu
MenuList
MenuPortal
LoadingMessage
NoOptionsMessage
MultiValue
MultiValueContainer
MultiValueLabel
MultiValueRemove
Option
Placeholder
SelectContainer
SingleValue
ValueContainer
See the official documentation for more information about the props they receive.