Select
Control to get / set a value within a list of options.
Module
import '@capitec/omni-components/select';import { OmniSelect } from "@capitec/omni-components-react/select";Source
@capitec/omni-components
Properties
| Name | Attribute | Type | Description |
|---|---|---|---|
| value | value | |
Value entered into the form component. |
| items | items | |
Selectable items of the select component. |
| displayField | display-field | |
Field of the item to display as one of the selectable options. |
| idField | id-field | |
Id field of the items provided. |
| emptyMessage | empty-message | |
Message displayed in the items container when no items are bound to the component. |
| searchable | searchable | |
Toggles the ability to search the items of the select of the component. |
| renderItem | |
Render function for each item. | |
| renderSelection | |
Render function for selected item. | |
| filterItems | |
Custom search function for items instead of using the default provided. | |
| bottomOfViewport | |
||
| isMobile | |
||
| searchValue | |
||
| popUp | |
||
| searchElement | |
||
| itemsContainer | |
||
| selectElement | |
||
| label | label | |
Text label. |
| data | data | |
Data associated with the component. |
| hint | hint | |
Hint message to assist the user. |
| error | error | |
Error message guiding a user to correct a mistake. |
| disabled | disabled | |
Indicator if the component should be disabled. |
| clearable | clearable | |
Toggles the ability to clear the value of the component. |
| dir | dir | |
Used to set the base direction of text for display |
| lang | lang | |
Used to identify the language of text content on the web |
Events
| Name | Type | Description |
|---|---|---|
| change | |
Types
| Name | Type |
|---|---|
| SelectTypes | |
| SelectItems | |
Slots
| Name | Description |
|---|---|
|
Used to define content that is displayed while async rendering is awaiting, or when renderLoading() is implicitly called |
|
Replaces the icon for the clear slot. |
|
Replaces the icon for the prefix slot. |
|
Replaces the icon for the suffix slot. |
|
Replaces the icon for the more slot (Displays on mobile devices). |
|
Replaces the icon for the arrow slot (Displays on desktop and tablet devices). |
|
Replaces the icon in the Search field (Displays when searchable is set to true). |
Theme Variables
| Name | Description |
|---|---|
|
Theme primary color. |
|
Theme primary hover color. |
|
Theme primary active color. |
|
Theme accent color. |
|
Theme accent hover color. |
|
Theme accent active color. |
|
Theme background color. |
|
Theme background hover color. |
|
Theme background active color. |
|
Theme font color. |
|
Theme disabled border color. |
|
Theme disabled background color. |
|
Theme disabled background color. |
|
Theme error border color. |
|
Theme hint font color. |
|
Theme inactive color. |
|
Theme inactive color. |
|
Theme font family. |
|
Theme font size. |
|
Theme font weight. |
|
Theme border radius. |
|
Theme border width. |
|
Theme box shadow. |
Base Form Variables
| Name | Description |
|---|---|
|
Container font family. |
|
Container width. |
|
Container height. |
|
Layout border radius. |
|
Layout background color. |
|
Layout height. |
|
Layout width. |
|
Form border top. |
|
Form border bottom. |
|
Form border left. |
|
Form border right. |
|
Form border width. |
|
Form border radius. |
|
Form border style. |
|
Form border color. |
|
Form label margin left. |
|
Form label text align. |
|
Form label color. |
|
Form label font size. |
|
Form label font weight. |
|
Form label z-index. |
|
Form focussed border width. |
|
Form focussed border color. |
|
Form focussed label disabled background color. |
|
Form focussed label transform scale. |
|
Form focussed label left margin. |
|
Form focussed label color. |
|
Form focussed error label color. |
|
Form focussed label background color. |
|
Form focussed label left. |
|
Form focussed label right. |
|
Form error label color. |
|
Form error border color. |
|
Form label disabled color. |
|
Form disabled border color. |
|
Form disabled background color. |
|
Form disabled label focussed background color. |
|
Form hint label font color. |
|
Form hint label font family. |
|
Form hint label font size. |
|
Form hint label font weight. |
|
Form hint label top padding. |
|
Form hint label left padding. |
|
Form hint label border width. |
|
Form error label font color. |
|
Form error label font family. |
|
Form error label font size. |
|
Form error label font weight. |
|
Form error label top padding. |
|
Form error label left padding. |
|
Form error label border width. |
|
Form hover color. |
|
Form disabled hover color. |
|
Form error hover color. |
|
Form clear control right margin. |
|
Form clear control left margin. |
|
Form clear control width. |
|
Form clear icon color. |
|
Form clear slot height. |
|
Form clear slot width. |
Component Variables
| Name | Description |
|---|---|
|
Select component input field text align. |
|
Select component input field font color. |
|
Select component input field font family. |
|
Select component input field font size. |
|
Select component input field font weight. |
|
Select component input field padding. |
|
Select component input field height. |
|
Select component input field width. |
|
Select component input field disabled font color. |
|
Select component input field error font color. |
|
Select component control padding. |
|
Select control icon width. |
|
Select control icon height. |
|
Select control icon color. |
|
Select control error icon color. |
|
Select items container box shadow. |
|
Select items container background color. |
|
Select items container z-index. |
|
Select items max height. |
|
Select items container width |
|
Select items container top. |
|
Select items container top when rendered at the bottom. |
|
Select items height. |
|
Select items width. |
|
Select items background color. |
|
Select item font color. |
|
Select item font family. |
|
Select item font size. |
|
Select item font weight. |
|
Select item top padding. |
|
Select item bottom padding. |
|
Select item left padding. |
|
Select item right padding. |
|
Select item width. |
|
Select item hover background color. |
|
Selected item color. |
|
Select item hover. |
|
Select loading indicator width. |
|
Select loading indicator height. |
|
Select search field font color. |
|
Select search field font family. |
|
Select search field font size. |
|
Select search field font weight. |
|
Select search field top padding. |
|
Select search field bottom padding. |
|
Select search field left padding. |
|
Select search field right padding. |
|
Select search field width. |
|
Select search field top border width. |
|
Select search field left border width. |
|
Select search field right border width. |
|
Select search field bottom border width. |
|
Select search field bottom border color. |
|
Select search field background color. |
|
Select search field clear control bottom border. |
|
Select search field clear div right padding. |
|
Select search field clear div background color. |
|
Select search field clear icon height. |
|
Select search field clear icon width. |
|
Select search field clear icon color. |
|
Select item header left. |
|
Select item header right. |
|
Select item header font color. |
|
Select item header font family. |
|
Select item header font size. |
|
Select item header font weight. |
|
Select item header font background color. |
|
Select item header top padding. |
|
Select item head bottom padding. |
|
Select item head right padding. |
|
Select item head left padding. |
|
Select item header top left border radius. |
|
Select item header top right border radius. |
|
Select dialog width |
|
Select dialog left. |
|
Select dialog right. |
|
Select dialog bottom. |
|
Select dialog background color. |
|
Select dialog modal max width. |
|
Select dialog height. |
|
Select dialog background color. |
|
Select dialog items min height. |