Form
Typeahead2.0
WORK IN PROGRESS: This component has not gone through final testing and a11y validation. It may see breaking changes in the near future based on the feedback from testing.
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-typeahead';
defineCustomElement();
const options = ['foo', 'bar', 'foobar', 'foofoo', 'barbar', 'foofoobarbar', 'foobarfoobar']
document.querySelector('anchor-typeahead').setAttribute('options', JSON.stringify(options));
</script>
<anchor-typeahead>Hello</anchor-typeahead>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();
const options = ['foo', 'bar', 'foobar', 'foofoo', 'barbar', 'foofoobarbar', 'foobarfoobar']
document.querySelector('anchor-typeahead').setAttribute('options', JSON.stringify(options));
</script>
<anchor-typeahead>Hello</anchor-typeahead>Disabled
<script type="module">
const options = ['foo', 'bar', 'foobar', 'foofoo', 'barbar', 'foofoobarbar', 'foobarfoobar']
document.querySelector('anchor-typeahead').setAttribute('options', JSON.stringify(options));
</script>
<anchor-typeahead disabled>Hello</anchor-typeahead>Read Only
<script type="module">
const options = ['foo', 'bar', 'foobar', 'foofoo', 'barbar', 'foofoobarbar', 'foobarfoobar']
document.querySelector('anchor-typeahead').setAttribute('options', JSON.stringify(options));
</script>
<anchor-typeahead readonly>Hello</anchor-typeahead>Required
If you pass the required property to the input, the input will be required.
<script type="module">
const options = ['foo', 'bar', 'foobar', 'foofoo', 'barbar', 'foofoobarbar', 'foobarfoobar']
document.querySelector('anchor-typeahead').setAttribute('options', JSON.stringify(options));
</script>
<anchor-typeahead required>Hello</anchor-typeahead>Help text
You can add a helpful text to the input by passing the help-text property.
<script type="module">
const options = ['foo', 'bar', 'foobar', 'foofoo', 'barbar', 'foofoobarbar', 'foobarfoobar']
document.querySelector('anchor-typeahead').setAttribute('options', JSON.stringify(options));
</script>
<anchor-typeahead help-text="This is a help text">Hello</anchor-typeahead>With Error Message
You can combine the error-prop properties to show an invalid input.
<script type="module">
const options = ['foo', 'bar', 'foobar', 'foofoo', 'barbar', 'foofoobarbar', 'foobarfoobar']
document.querySelector('anchor-typeahead').setAttribute('options', JSON.stringify(options));
</script>
<anchor-typeahead error-prop="This is a error message">Hello</anchor-typeahead>API
anchor-typeahead
WORK IN PROGRESS: This component has not gone through final testing and a11y validation. It may see breaking changes in the near future based on the feedback from testing.
How to use the typeahead component
Basic typeahead
<anchor-typeahead options='["foo","bar","foobar"]' language="NO" texts='{"noResult":"The search yeilded no results"}'></anchor-typeahead>Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
disabled | disabled | Value indicating whether or not this typeahead should be disabled | boolean | undefined |
errorProp | error-prop | Show an error message | string | '' |
filter | filter | The type of filter to use | "contains" | "containsWords" | "custom" | "startsWith" | 'containsWords' |
inputId | input-id | The id of the input field | string | `anchor-typeahead-${uuidv4()}` |
label | label | Label for the input field | string | undefined |
language | language | The display language for the component. | "DK" | "NO" | 'NO' |
limitNumberOfVisibleOptions | limit-number-of-visible-options | When this is true, the component will have a maximum number of options to show, determined by the numberOfOptionsToDisplay prop. Default value is false. | boolean | false |
messagePlacement | message-placement | This prop decides if the messages should render between the label of an input and the input field, or below the input field. | "below" | "inside" | undefined |
numberOfOptionsToDisplay | number-of-options-to-display | The maximum number of options to display when limitNumberOfVisibleOptions is true. Default value is 100. | number | 100 |
options | options | Array of options to choose from, a JSON serialized string or an array of OptionValue | OptionValue[] | string | undefined |
placeholder | placeholder | Placeholder for the input field | string | undefined |
readonly | readonly | Set the field to be read only | boolean | false |
required | required | Mark the field as required | boolean | false |
showAllOptions | show-all-options | This prop decides if the component should show all available options before the user has typed a search phrase. | boolean | true |
texts | texts | Override some, or all, texts used internally in the component | string | JSON.stringify({}) |
uuid | uuid | The id of the input field | string | uuidv4() |
validityMissingValueText | validity-missing-value-text | Text to be displayed if when value is missing an native form validation is used | string | undefined |
value | value | The value of the input field | string | '' |
whitespaceCharacters | -- | Array of strings which should be treated as whitespace to make it easier to match results | 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> |
inputChange | [DEPRECATED] this event has been replaced by the selected event. inputChange is emitted by the underlying anchor-input. Will be removed 20.12.2023 | CustomEvent<any> |
selected | Event emitted when a valid option has been selected | CustomEvent<any> |
CSS Custom Properties
| Name | Description |
|---|---|
--typeahead-border-color | Set the border color of the |
--typeahead-border-color-disabled | Set the disabled border color of the |
--typeahead-border-color-error | Set the error border color of the |
--typeahead-border-color-focus | Set the focus border color of the |
--typeahead-border-color-hover | Set the hover border color of the |
--typeahead-border-color-readonly | Set the readonly border color of the |
--typeahead-border-color-warning | Set the warning border color of the |
--typeahead-border-radius | Set the border radius of the |
--typeahead-border-width | Set the border width of the |
--typeahead-font-weight-label | Set the font weight of the label |
--typeahead-icon-color | Set the icon color of the icon |
--typeahead-icon-color-disabled | Set the icon color of the icon when disabled |
--typeahead-max-width | Set the max width of the |
--typeahead-outline | Set the outline of the |
--typeahead-width | Set the width of the |
--typeahead-z-index | Set the z index of the |
Dependencies
Depends on
Graph
Built with StencilJS