Form
Textarea3.0
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-textarea';
defineCustomElement();
</script>
<anchor-textarea label="This is a textarea"></anchor-textarea>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-textarea label="This is a textarea"></anchor-textarea>Disabled
<anchor-textarea label="This is a textarea" disabled></anchor-textarea>Read Only
<anchor-textarea label="This is a textarea" readonly></anchor-textarea>Placeholder
<anchor-textarea label="This is a textarea" placeholder="Placeholder"></anchor-textarea>With Error Message
You add the error property to show an invalid textarea.
<anchor-textarea label="This is a textarea" error="Error message"></anchor-textarea>With Error Message as slot
You add the error-msg slot to show an invalid textarea.
<anchor-textarea label="This is a textarea" error="Error message"></anchor-textarea>Help text
<anchor-textarea label="This is a textarea" help-text="Help message"></anchor-textarea>Max length
<anchor-textarea label="This is a textarea" maxlength="100""></anchor-textarea>Accessibility
- Built with a native
<textarea>element. - Visual and ARIA labeling support.
- Change, clipboard, composition, selection, and input event support.
- Required and invalid states exposed to assistive technology via ARIA.
- Support for description and error message help text linked to the input via ARIA.
API
anchor-textarea
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
ariaDescribedBy | aria-described-by | aria-describedby attribute for the textarea field | string | undefined |
ariaLive | aria-live | aria-live attribute for the textarea field | string | undefined |
autocomplete | autocomplete | Set the autocomplete attribute for the textarea field | string | undefined |
autocorrect | autocorrect | This prop decides if the textarea field should be autocorrect or not | boolean | false |
autofocus | autofocus | This prop decides if the textarea field should be autofocused or not | boolean | false |
disabled | disabled | This prop decides if the textarea field should be disabled or not | boolean | false |
error | error | Show an error message | string | '' |
helpText | help-text | Show a help text | string | undefined |
label | label | The label text of the textarea field | string | undefined |
maxlength | maxlength | The maximum length of the textarea field | number | undefined |
messagePlacement | message-placement | This prop decides if the messages should render between the label of an textarea and the textarea field, or below the textarea field. | "below" | "inside" | 'inside' |
name | name | The name of the textarea field | string | undefined |
noResize | no-resize | This prop decides if the textarea field should be resizable or not | boolean | false |
placeholder | placeholder | The placeholder text of the textarea field | string | undefined |
readonly | readonly | This prop decides if the textarea field should be readonly or not | boolean | false |
required | required | This prop decides if the textarea field is required or not | boolean | false |
selectOnFocus | select-on-focus | This prop decides if all content inside the textarea should be selected when it gets focus | boolean | undefined |
spellCheck | spell-check | This prop decides if the textarea field should be spellchecked or not | "false" | "true" | 'false' |
uuid | uuid | A unique identifier for the textarea component. | string | `anchor-textarea-${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 in the textarea field. Use this to set a value and read it | string | '' |
Events
| Event | Description | Type |
|---|---|---|
blurevent | Event emitted when the user blurs the textarea field | CustomEvent<any> |
clearevent | Event emitted when the user clears the textarea field | CustomEvent<EventDetail> |
focusevent | Event emitted when the user is focusing the textarea field | CustomEvent<any> |
inputChange | Event emitted when the textarea value is changed. Only triggers when focus leaves the textarea element | CustomEvent<EventDetail> |
inputEvent | Event emitted when the user is inputting something into the input field | CustomEvent<EventDetail> |
Methods
focusTextarea() => Promise<void>
Returns
Type: Promise<void>
CSS Custom Properties
| Name | Description |
|---|---|
--textarea-base-height | Set the base height of the textarea to 3 times the height of a standard component |
--textarea-base-max-width | Set the base max width of the textarea |
--textarea-base-width | Set the base width of the textarea |
--textarea-border-base-width | Set the base width of the border |
--textarea-border-color | Set the border color |
--textarea-border-color-disabled | Set the border color for a disabled textarea |
--textarea-border-color-error | Set the border color for error states |
--textarea-border-color-focus | Set the border color on focus |
--textarea-border-color-hover | Set the border color on hover |
--textarea-border-radius | Set the border radius |
--textarea-color-read-only | Set the border color for a readonly textarea |
--textarea-line-height | Set the line height of the textarea |
--textarea-outline | Set the color of the outline |
Dependencies
Depends on
Graph
Built with StencilJS