@commercetools-uikit/select-field

SelectField

Description

A controlled input component with validation states and a label getting a selection from the user.

Installation

yarn add @commercetools-uikit/select-field

npm --save install @commercetools-uikit/select-field

Additionally install the peer dependencies (if not present)

yarn add react

npm --save install react

Usage

import SelectField from '@commercetools-uikit/select-field';

const Example = () => (
  <SelectField
    title="State"
    value="ready"
    options={[
      { value: 'ready', label: 'Ready' },
      { value: 'shipped', label: 'Shipped' },
    ]}
    onChange={(event) => alert(event.target.value)}
  />
);

export default Example;

Properties

Props	Type	Required	Default	Description
id	string			Used as HTML id property. An id is generated automatically when not provided.
horizontalConstraint	union Possible values: , 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'		'scale'
errors	Object See signature.			A map of errors. Error messages for known errors are rendered automatically. Unknown errors will be forwarded to renderError.
renderError	Function See signature.			This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error.
warnings	Record			A map of warnings. Warning messages for known warnings are rendered automatically. Unknown warnings will be forwarded to renderWarning.
renderWarning	Function See signature.			Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage. It can also return null to show no warning.
isRequired	boolean			Indicates if the value is required. Shows an the "required asterisk" if so.
touched	union Possible values: boolean[] , boolean			Indicates whether the field was touched. Errors will only be shown when the field was touched.
appearance	union Possible values: 'default' , 'quiet'			Indicates the appearance of the input. Quiet appearance is meant to be used with the horizontalConstraint="auto".
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	boolean			Remove the currently focused option when the user presses backspace
components	ReactSelectProps['components']			Map of components to overwrite the default ones, see what components you can override Props from React select was used
controlShouldRenderValue	ReactSelectProps['controlShouldRenderValue']			Control whether the selected values should be rendered in the control Props from React select was used
filterOption	ReactSelectProps['filterOption']			Custom method to filter whether an option should be displayed in the menu Props from React select was used
containerId	string			The id to set on the SelectContainer component
isClearable	boolean			Is the select value clearable
isDisabled	boolean			Is the select disabled
isReadOnly	boolean			Is the select read-only
isCondensed	boolean			Whether the input and its options are rendered with condensed paddings
isOptionDisabled	ReactSelectProps['isOptionDisabled']			Override the built-in logic to detect whether an option is disabled Props from React select was used
isMulti	boolean			Support multiple selected options
isSearchable	boolean			Whether to enable search functionality
maxMenuHeight	number			Maximum height of the menu before scrolling
menuPortalTarget	ReactSelectProps['menuPortalTarget']			Dom element to portal the select menu to Props from React select was used
menuPortalZIndex	number			z-index value for the menu portal Use in conjunction with menuPortalTarget
menuShouldBlockScroll	boolean			whether the menu should block scroll while open
name	string			Name of the HTML Input (optional - without this, no input will be rendered)
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. Props from React select was used
onBlur	Function See signature.			Handle blur events on the control
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.
onFocus	ReactSelectProps['onFocus']			Handle focus events on the control Props from React select was used
onInputChange	ReactSelectProps['onInputChange']			Handle change events on the input Props from React select was used
options	union Possible values: TOption[] , TOptionObject[]			Array of options that populate the select menu
showOptionGroupDivider	boolean
placeholder	string			Placeholder text for the select value
tabIndex	ReactSelectProps['tabIndex']			Sets the tabIndex attribute on the input Props from React select was used
tabSelectsValue	boolean			Select the currently focused option when the user presses tab
value	ReactSelectProps['value']			The value of the select; reflected by the selected option Props from React select was used
title	ReactNode	✅		Title of the label
hint	ReactNode			Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas description can describe it in more depth. Can also receive a hintIcon.
description	ReactNode			Provides a description for the title.
onInfoButtonClick	Function See signature.			Function called when info button is pressed. Info button will only be visible when this prop is passed.
hintIcon	ReactElement			Icon to be displayed beside the hint text. Will only get rendered when hint is passed as well.
badge	ReactNode			Badge to be displayed beside the label. Might be used to display additional information about the content of the field (E.g verified email)
hasWarning	boolean			Control to indicate on the input if there are selected values that are potentially invalid @deprecated Please use the warnings prop instead so users know the reason why the field is in warning state.
iconLeft	ReactNode			Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled.
inputValue	ReactSelectProps['inputValue']			The value of the search input Props from React select was used

Signatures

Signature errors

{
  missing?: boolean;
}

Signature renderError

(key: string, error?: boolean) => ReactNode;

Signature renderWarning

(key: string, warning?: boolean) => ReactNode;

Signature onBlur

(event: TCustomEvent) => void

Signature onChange

(event: TCustomEvent) => void

Signature onInfoButtonClick

(
  event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>
) => void