Form
Quantity3.0
The anchor-quantity component is a web component that displays a number input with incrementer and decrementer buttons.
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-quantity';
defineCustomElement();
</script>
<anchor-quantity value="0" min="0" max="10"></anchor-quantity>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-quantity value="0" min="0" max="10"></anchor-quantity>Disabled
<anchor-quantity name="quantity-field" disabled>Write a number</anchor-quantity>Props
The anchor-quantity component accepts the following properties:
- value: The value of the quantity input.
- min: The minimum value that the quantity input can have.
- max: The maximum value that the quantity input can have.
- disabled: A boolean that determines whether the quantity input is disabled.
In this example, the value property is set to 0, the min property is set to 0, and the max property is set to 10. This displays a quantity input with a value of 0 and incrementer and decrementer buttons that allow the user to increase or decrease the value.
API
anchor-radio
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
ariaActivedescendant | aria-activedescendant | aria-activedescendant attribute for the input field | string | '' |
ariaDescribedBy | aria-described-by | aria-describedby attribute for the input field | string | '' |
ariaLive | aria-live | aria-live attribute for the input field | string | undefined |
disabled | disabled | Disable the input field | boolean | false |
error | error | Show an error state on input field | boolean | false |
errorText | error-text | Show an error message | string | undefined |
helpText | help-text | Show a help text | string | undefined |
inputId | input-id | The id of the input field | string | `anchor-quantity-${generateGuid()}` |
label | label | Show a label above the input field | string | undefined |
max | max | The maximum value of the input field | number | undefined |
min | min | The minimum value of the input field | number | undefined |
readonly | readonly | Set the field to be read only | boolean | false |
required | required | Mark the field as required | boolean | false |
step | step | The step value of the input field | number | 1 |
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 in the input field. Use this to set a value | number | 0 |
Events
| Event | Description | Type |
|---|---|---|
blurevent | Event emitted when the user blurs the input field | CustomEvent<any> |
clearevent | Event emitted when the user clears the input field | CustomEvent<any> |
focusevent | Event emitted when the user is focusing the input field | CustomEvent<any> |
inputChange | Event emitted when the input is changed. Only triggers when focus leaves the input | CustomEvent<EventDetail> |
inputevent | Event emitted when the user is inputting something into the input field | CustomEvent<EventDetail> |
CSS Custom Properties
| Name | Description |
|---|---|
--quantity-input-max-width | Sets the max width of the input field |
--quantity-input-width | Sets the width of the input field |
Dependencies
Depends on
Graph
Built with StencilJS