Form
Toggle3.0
Toggle component is used as an alternative between checked and not checked states.
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-toggle';
defineCustomElement();
</script>
<anchor-toggle>Toggle label</anchor-toggle>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-toggle>Toggle label</anchor-toggle>Checked
<anchor-toggle checked>Toggle label</anchor-toggle>Disabled
<anchor-toggle disabled>Toggle label</anchor-toggle>Slots
- base: Checkbox wrapper, it handles alignment, placement, and general appearance.
- wrapper: An inner container that includes styles for relative positioning, flex properties, overflow handling and managing hover and selected states.
- icon: Icon within the checkbox, controlling size, visibility, and changes when checked.
- label: The text associated with the checkbox.
Accessibility
- Built with a native HTML
<input>element. - Full support for browser features like form autofill.
- Keyboard focus management and cross browser normalization.
- Keyboard event support for Tab, Enter and Space keys.
- Labeling support for assistive technology.
- Indeterminate state support.
API
anchor-toggle
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
checked | checked | If true the toggle will be checked | boolean | false |
disabled | disabled | If true the user cannot interact with the toggle | boolean | false |
inputId | input-id | The id of the input field | string | `anchor-toggle-${generateGuid()}` |
name | name | The name of the control, which is submitted with the form data. | string | this.inputId |
required | required | If true the toggle is marked as required | boolean | false |
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 toggle component. It does not control if its checked or not. Use checked for that. | string | 'on' |
Events
| Event | Description | Type |
|---|---|---|
toggled | CustomEvent<ToggleEventDetail> |
Methods
toggleInput(event?: any) => Promise<void>
Parameters
| Name | Type | Description |
|---|---|---|
event | any |
Returns
Type: Promise<void>
Dependencies
Depends on
Graph
Built with StencilJS
| Anchor version | Status | Notes |
|---|---|---|
| 3.0 | Ready for Implementation | This component is in sync with Figma. |