Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
Select one of available options from the drop-down menu. Simple Select is a Carbon styled equivalent of HTML Select Element.
To use the Select component you have to import two components: <Select /> and <Option />
from carbon-react/lib/components/select.
Always insert Option Components inside the Select, analogous to the original <select> and <option> HTML Elements.
You can use the required prop to indicate if the field is mandatory.
You can use listPlacement prop to set the position of the select list relative to the input element.
Option values could be passed as objects, useful when custom data is associated with an option.
When the id property is set, objects will be compared based on that property (could be used when the list is recreated after an API call).
If there is no id prop specified on an object, then the exact objects will be compared.
When isLoading prop is passed, a loader will be appended at the end of the Select List. That functionality could be used to load the options asynchronously.
The isLoading prop in combination with the onListScrollBottom prop can be used to implement infinite scroll.
This prop will be called every time a user scrolls to the bottom of the list.
The inline label can change to be top aligned at a breakpoint. Enable this by passing in a number to the adaptiveLabelBreakpoint prop. This corresponds to a px screen width
Message
Message
Message
Message
Message
Message
Message
Message
Message
Message
Message
Message
| Name | Description | Default |
|---|---|---|
| Margin | ||
| m | Margin, an integer multiplier of the base spacing constant (8px) or any valid CSS string. numberstring | - |
| mt | Margin top, an integer multiplier of the base spacing constant (8px) or any valid CSS string. numberstring | - |
| mr | Margin right, an integer multiplier of the base spacing constant (8px) or any valid CSS string. numberstring | - |
| mb | Margin bottom, an integer multiplier of the base spacing constant (8px) or any valid CSS string. numberstring | - |
| ml | Margin left, an integer multiplier of the base spacing constant (8px) or any valid CSS string. numberstring | - |
| mx | Margin left/right, an integer multiplier of the base spacing constant (8px) or any valid CSS string. numberstring | - |
| my | Margin top/bottom, an integer multiplier of the base spacing constant (8px) or any valid CSS string. numberstring | - |
| Name | Description | Default |
|---|---|---|
| data-component | Identifier used for testing purposes, applied to the root element of the component. string | "simple-select" |
| data-element | Identifier used for testing purposes, applied to the root element of the component. string | - |
| data-role | Identifier used for testing purposes, applied to the root element of the component. string | - |
| value | The selected value(s), when the component is operating in controlled mode stringobject | - |
| disablePortal | Boolean to toggle where SelectList is rendered in relation to the Select Input bool | false |
| defaultValue | The default selected value(s), when the component is operating in uncontrolled mode stringobject | - |
| children* | Child components (such as Option or OptionRow) for the SelectList node | - |
| openOnFocus | If true the Component opens on focus bool | false |
| transparent | If true the component input has no border and a transparent background bool | - |
| tableHeader | SelectList table header, should consist of multiple th elements. Works only in multiColumn mode node | - |
| multiColumn | When true component will work in multi column mode. Children should consist of OptionRow components in this mode bool | - |
| onOpen | A custom callback for when the dropdown menu opens func | - |
| isLoading | If true the loader animation is displayed below the last option bool | - |
| onListScrollBottom | A callback that is triggered when a user scrolls to the bottom of the list func | - |
| tooltipPosition | Overrides the default tooltip position "top""bottom""left""right" | - |
| listPlacement | Placement of the select list in relation to the input element "auto""auto-start""auto-end""top""top-start""top-end""bottom""bottom-start" | "bottom-start" |
| flipEnabled | Use the opposite list placement if the set placement does not fit bool | true |
Due to the Textbox component being used internally by the SimpleSelect component, most of the Textbox props are applicable to SimpleSelect
| Name | Description | Default |
|---|---|---|
| id | Id attribute of the input element string | - |
| name | Name attribute of the input element string | - |
| readOnly | If true the Component will be read-only bool | - |
| disabled | If true the Component will be disabled bool | - |
| autoFocus | If true the Component will be focused when rendered bool | - |
| label | Label string | - |
| labelHelp | Text applied to label help tooltip node | - |
| labelInline | When true, label is placed in line with an input bool | - |
| labelWidth | Width of a label in percentage. Works only when labelInline is true number | - |
| inputWidth | Width of an input in percentage. Works only when labelInline is true number | - |
| size | Size of an input "small""medium""large" | - |
| placeholder | Placeholder string to be displayed in input string | - |
| onChange | A custom callback for when changes occur func | - |
| onClick | Callback function for when the Select Textbox is clicked. func | - |
| onFocus | Callback function for when the Select Textbox is focused. func | - |
| onBlur | Callback function for when the Select Textbox loses it's focus. func | - |
| onKeyDown | Callback function for when the key is pressed when focused on Select Textbox. func | - |
| adaptiveLabelBreakpoint | Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set number | - |
| required | Flag to configure component as mandatory bool | - |
Any other supplied props will be provided to the underlying HTML input element
| Name | Description | Default |
|---|---|---|
| text* | The option's visible text, displayed within Textbox of Select, and used for filtering string | - |
| children | Optional: alternative rendered content, displayed within SelectList of Select (eg: an icon, an image, etc) node | - |
| value* | The option's invisible internal value objectstring | - |
| borderColor | MultiSelect only - custom Pill border color - provide any color from palette or any valid css color value. string | - |
| fill | MultiSelect only - fill Pill background with color bool | - |
The following keys are available to override the translations for this component by passing in a custom locale object to the i18nProvider.
| Name | Description | Default |
|---|---|---|
| select.placeholder | The text for the input component placeholder | - |