Form
Radio4.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>With Assistive Text
<anchor-radio description="Assistive text" style="line-height:24px;">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 |
description | description | Optional descriptive or assistive text displayed below the main label | string | undefined |
disabled | disabled | Disable the radio button | boolean | false |
inputId | input-id | This is name that the label refers to | string | undefined |
label | label | Optional Main label to be displayed. Use slot otherwise | 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>
Slots
| Slot | Description |
|---|---|
| The default slot | |
"default" | Slot for label content |
CSS Custom Properties
| Name | Description |
|---|---|
--form-field-help-text-font-weight | Sets the font weight for the description text. |
--form-field-help-text-size | Sets the font size for the description text. |
--form-field-label-font-weight | Sets the font weight for the main label text. |
--form-field-label-size | Sets the font size for the main label. |
--radio-aura-color-hover | Sets the color of the outline aura when hovered. |
--radio-aura-color-pressed | Sets the color of the outline aura when clicked/active. |
--radio-aura-width | Sets the thickness of the outline aura on hover and active states. |
--radio-background | Sets the default background color of the radio input. |
--radio-background-disabled | Sets the background color of the radio input when disabled. |
--radio-border-color | Sets the default border color of the unselected radio input. |
--radio-border-color-disabled | Sets the border color of the radio input when disabled. |
--radio-border-color-hover | Sets the border color of the radio input when hovered or active. |
--radio-border-default | Sets the default border thickness of the unselected radio input. |
--radio-box-shadow-color | Sets the color of the box shadow. |
--radio-box-shadow-width | Sets the box shadow thickness when checked (creates the inner dot effect). |
--radio-checked-background | Sets the dot color when checked. |
--radio-focus-ring-color | Sets the color of the focus ring when keyboard navigating. |
--radio-focus-ring-size | Sets the overall width and height of the focus ring. |
--radio-focus-ring-width | Sets the width of the focus ring when keyboard navigating. |
--radio-size | Sets the overall width and height of the radio input. |
--radio-text-color | Sets the color for the main label and description text. |
--radio-text-color-disabled | Sets the text color for the label and description when disabled. |
--radio-text-line-height | Sets the line height for the main label and description text. |
Dependencies
Depends on
Graph
graph TD;
anchor-radio --> anchor-form-field
anchor-form-field --> anchor-icon
style anchor-radio fill:#f9f,stroke:#333,stroke-width:4pxBuilt 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.