Radio2.0
Ads by Tryg Careers
Installation
npm i @tryg/vue-ui-libraryUsage
Install the component library as a Vue plugin. This globally registers all Anchor components.
import { createApp } from 'vue';
import { ComponentLibrary } from '@tryg/vue-ui-library';
import App from './App.vue';
const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');<template>
<anchor-radio label="Radio label"></anchor-radio>
</template>Import only the components you need for optimal bundle size.
<script setup>
import { AnchorRadio } from '@tryg/vue-ui-library';
</script>
<template>
<anchor-radio label="Radio label"></anchor-radio>
</template>Disabled
<template>
<anchor-radio label="Radio label" disabled></anchor-radio>
</template>Checked
<template>
<anchor-radio label="Radio label" checked></anchor-radio>
</template>CSS variables
The following CSS custom properties are exposed:
| Variable | Description |
|---|---|
--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-border-width | Sets the border thickness when checked (creates the inner dot effect) |
--radio-description-font-weight | Sets the font weight for the description text |
--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-label-font-weight | Sets the font weight for the main label text |
--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 |
--radio-text-size | Sets the font size for the main label and description text |
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 arrow 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 |
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 |
|---|---|
"default" | Slot for label content |
CSS Custom Properties
| Name | Description |
|---|---|
--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-border-width | Sets the border thickness when checked (creates the inner dot effect). |
--radio-description-font-weight | Sets the font weight for the description text. |
--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-label-font-weight | Sets the font weight for the main label text. |
--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. |
--radio-text-size | Sets the font size for the main label and description text. |
Dependencies
Depends on
Graph
graph TD;
anchor-radio --> anchor-label
style anchor-radio fill:#f9f,stroke:#333,stroke-width:4pxBuilt with StencilJS
Quantity
The AnchorQuantity 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.