Form
Select3.0
AnchorSelect is a DropDown component that allows the consumer to pass in an array of values, and have the user select a value that will be emitted back to the consumer.
Ads by Tryg Careers
Installation
npm i @tryg/ui-libraryUsage
Individual only imports the desired component, and only needs to be included once within the application. Which is beneficial to keep the application size small.
<script type="module">
import { defineCustomElement } from '@tryg/ui-library/dist/components/anchor-select';
defineCustomElement();
</script>
<anchor-select options='["Option 1", "Option 2", "Option 3", "Option 4" ]'>Select</anchor-select>Global only needs to be defined once in the application, but it will import all components even the ones that are not in use..
<script type="module">
import { defineCustomElements } from '@tryg/ui-library/dist/loader';
defineCustomElements();
</script>
<anchor-select options='["Option 1", "Option 2", "Option 3", "Option 4" ]'>Select</anchor-select>Option formatting
<anchor-select options='["Option 1", "Option 2", "Option 3", "Option 4" ]'>Select</anchor-select>Disabled
<anchor-select options='[]' disabled>Select</anchor-select>Selected item
<anchor-select options='["Option 1", "Option 2", "Option 3", "Option 4" ]' selected-index="2">Select</anchor-select>Accessibility
The component is designed to work with both mouse and keyboard navigation, and to be compliant with the Anchor accessibility guidelines.
- Avoid very long option names to facilitate understanding and perception.
- Don't use the same word or phrase at the beginning of a set of options.
- Avoid options that contain headings and interactive elements such as links, buttons or checkboxes.
- If the dropdown is a required field include the aria-required property and indicate that it is a required field.
API
anchor-select
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
disabled | disabled | Value indicating whether or not this particular SelectItem should be disabled from selecting | boolean | false |
error | error | Boolean value indicating whether or not this particular SelectItem should display an error message | boolean | false |
expanded | expanded | Value indicating whether or not the DropDown select should be expanded | boolean | false |
initialValue | initial-value | Values to be shown in the DropDown select | string | '- Select a value -' |
options | options | Values to be shown in the DropDown select | OptionValue[] | string | string[] | undefined |
required | required | Mark the field as required | boolean | false |
selectId | select-id | Unique identificator for this DOM node. Default generated by uuidv4. | string | uuidv4() |
selectedIndex | selected-index | The index of the item which should be pre-selected - defaults to the first item in the Array | number | undefined |
selectedItem | selected-item | [DEPRECATED] use selectedIndex instead. This has the same functionality, but a better name. This field will be removed 23.12.23 | number | undefined |
validityMissingValueText | validity-missing-value-text | Text to be displayed if when value is missing an native form validation is used | string | undefined |
Events
| Event | Description | Type |
|---|---|---|
collapse | Event emitted when the dropdown select collapses | CustomEvent<any> |
expand | Event emitted when the dropdown select expands | CustomEvent<any> |
selected | Event emitted when an select-item is selected - containing the value of that select-item | CustomEvent<any> |
Methods
collapseComponent(e?: any) => Promise<CustomEvent<any>>
Parameters
| Name | Type | Description |
|---|---|---|
e | any |
Returns
Type: Promise<CustomEvent<any>>
expandAndFocus() => Promise<boolean>
Returns
Type: Promise<boolean>
expandComponent(e?: any) => Promise<CustomEvent<any>>
Parameters
| Name | Type | Description |
|---|---|---|
e | any |
Returns
Type: Promise<CustomEvent<any>>
focusFirst() => Promise<boolean>
Returns
Type: Promise<boolean>
focusLast() => Promise<boolean>
Returns
Type: Promise<boolean>
handleNext(e: any) => Promise<boolean>
Parameters
| Name | Type | Description |
|---|---|---|
e | any |
Returns
Type: Promise<boolean>
handlePressed(e: MouseEvent, index: number) => Promise<CustomEvent<any>>
Parameters
| Name | Type | Description |
|---|---|---|
e | MouseEvent | |
index | number |
Returns
Type: Promise<CustomEvent<any>>
handlePrevious(e: any) => Promise<boolean>
Parameters
| Name | Type | Description |
|---|---|---|
e | any |
Returns
Type: Promise<boolean>
selectAndCollapse(index: number) => Promise<CustomEvent<any>>
Parameters
| Name | Type | Description |
|---|---|---|
index | number |
Returns
Type: Promise<CustomEvent<any>>
setFocus(index?: number) => Promise<boolean>
Parameters
| Name | Type | Description |
|---|---|---|
index | number |
Returns
Type: Promise<boolean>
setSelect(index: number) => Promise<CustomEvent<any>>
Parameters
| Name | Type | Description |
|---|---|---|
index | number |
Returns
Type: Promise<CustomEvent<any>>
CSS Custom Properties
| Name | Description |
|---|---|
--select-background-color | Set the background color of the |
--select-background-color-list | Set the background color of the 's dropdown list, defaults to the same as the select |
--select-border-color | Set the border color of the |
--select-border-color-disabled | Set the disabled border color of the |
--select-border-color-error | Set the error border color of the |
--select-border-color-focus | Set the focus border color of the |
--select-border-color-hover | Set the hover border color of the |
--select-border-color-readonly | Set the readonly border color of the |
--select-border-color-warning | Set the warning border color of the |
--select-border-radius | Set the border radius of the |
--select-border-width | Set the border width of the |
--select-border-width-error | Set the border width of the in case of an error |
--select-font-family | Set the font-family of the |
--select-list-offset | Set the offset of the dropdown list |
--select-message-gap | Set the message gap of the |
--select-text-color | Set the text color of the |
--select-text-color-disabled | Set the text color of the when disabled |
--select-text-color-expanded | Set the text color of the when the dropdown is expanded |
--select-z-index | Set the z index of the dropdown |
Dependencies
Depends on
Graph
Built with StencilJS