Z Web Components

Radio-group & Radio

<z-radio-group> is a component that encapsulates <z-radio> components and exposes as a value the one that is active.

<z-radio> is a component that provides the same functionality as a native <input type="radio"> enhanced with a better and unified design.

<z-radio-group>
    <z-radio label="radio input 1" value="1"></z-radio>
    <z-radio label="radio input 2" value="2"></z-radio>
</z-radio-group>

Attributes

Name (z-radio-group)

The name attribute is the name that will be used on the internal radio inputs. It is recommanded to set it on the <z-radio-group> component.

<z-radio-group name="z-radio-demo">
    <z-radio label="radio input 1" value="1"></z-radio>
    <z-radio label="radio input 2" value="2"></z-radio>
</z-radio-group>

Value (z-radio-group & z-radio)

The value attribute exists on both the <z-radio-group> and <z-radio> components.

On the <z-radio-group> component, it reflects the value of the selected <z-radio> component.

On the <z-radio> component it contains the value to be passed to its <z-radio-group> parent when selected.

When set on the <z-radio-group> component, it acts as a default value.

<z-radio-group value="2">
    <z-radio label="radio input" value="1"></z-radio>
    <z-radio label="radio input" value="2"></z-radio>
</z-radio-group>

Checked (z-radio)

The checked attribute is watched and makes the radio beeing checked if provided (no value needed).

This attribute can also be used for setting a default value to the <z-radio-group> component.

<z-radio-group>
    <z-radio label="radio input checked" value="1" checked></z-radio>
    <z-radio label="radio input" value="2"></z-radio>
</z-radio-group>

<z-radio-group value="2">
    <z-radio label="radio input checked" value="1" checked></z-radio>
    <z-radio label="radio input" value="2"></z-radio>
</z-radio-group>

Label (z-radio)

The label attribute provides a clickable label for the <z-radio> component.

Right (z-radio)

The label attribute provides a clickable label for the <z-radio> component.

<z-radio-group>
    <z-radio label="radio input 1 right" value="1" right></z-radio>
    <z-radio label="radio input 2" value="2"></z-radio>
</z-radio-group>

Disabled (z-radio)

The disabled attribute prevents the <z-radio> component from beeing used and gives it an understandable styling.

The <z-radio-group> component will ignore the disabled <z-radio> components when navigating with keyboard arrow keys.

<z-radio-group>
    <z-radio label="radio input 1" value="1"></z-radio>
    <z-radio label="radio input 2" value="2" disabled></z-radio>
    <z-radio label="radio input 3" value="3"></z-radio>
</z-radio-group>

Accessibility

Radio group

The <z-radio-group> component is a wrapper for a list of <z-radio> components.

It provides a value corresponding to the selected <z-radio> component.

Radio

The <z-radio> component works with the native <input type="checkbox"> element to provide an accessible experience.

Only the active <z-radio> component inside a <z-radio-group> component should be focusable. (depends on browser implementation)

To select the other <z-radio> components, you have to have focus on one of them and:

• Use Up or Left key for previous radio.
• Use Right or Down key for next radio.

Events

z-change (z-radio-group)

The z-change event is fired whenever the selected <z-radio> component changes. It is a CustomEvent.

This event provides a detail object containing the value of the newly selected radio input.

<z-radio-group id="change-event-radio">
    <z-radio label="radio input 1" value="1"></z-radio>
    <z-radio label="radio input 2" value="2"></z-radio>
</z-radio-group>

<p>Result: <b id="change-event-result"></b></p>

<script>
    const $radio = document.querySelector('#change-event-radio')
    const $result = document.querySelector('#change-event-result')

    $radio.addEventListener('z-change', ({ detail }) => {
        $result.innerText = detail.value
    })
</script>

z-change (z-radio)

The z-change event is fired whenever the value of the radio input changes. It is a CustomEvent.

This event provides a detail object containing the new value of the radio input.