Form
Radio2.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-radio';
defineCustomElement();
</script>
<anchor-radio>Hello</anchor-radio>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-radio>Hello</anchor-radio>Disabled
<anchor-radio disabled>Hello</anchor-radio>Checked
<anchor-radio checked>Hello</anchor-radio>Accessibility
- Radio groups are exposed to assistive technology via ARIA.
- Each radio is built with a native HTML
<input>element, which can be optionally visually hidden to allow custom styling. - Full support for browser features like form autofill.
- Keyboard event support for arrows keys.
- Keyboard focus management and cross browser normalization.
- Group and radio labeling support for assistive technology.
API
anchor-radio
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
background | background | Set a white background for the radio button. Use this when the radio button is placed on a non-white background | boolean | false |
checked | checked | The radio button is checked | boolean | false |
disabled | disabled | Disable the radio button | boolean | false |
inputId | input-id | This is name that the label refers to | string | undefined |
name | name | This is the name for the entire radio button group | string | undefined |
required | required | Mark the field 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 | This is the string that is returned as a value, when the form is submitted | string | '' |
Events
| Event | Description | Type |
|---|---|---|
toggled | CustomEvent<any> |
Methods
toggleRadio(e?: any) => Promise<void>
Parameters
| Name | Type | Description |
|---|---|---|
e | any |
Returns
Type: Promise<void>
Dependencies
Depends on
Graph
Built with StencilJS
Quantity
The anchor-quantity component is a web component that displays a number input with incrementer and decrementer buttons.
Select
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.