Light Dark System

Radio Group

<zn-radio-group> | ZnRadioGroup
Since 1.0 experimental

Short summary of the component’s intended use.

Option 1 Option 2 Option 3 
<zn-radio-group>
  <zn-radio value="1">Option 1</zn-radio>
  <zn-radio value="2">Option 2</zn-radio>
  <zn-radio value="3">Option 3</zn-radio>
</zn-radio-group>

Examples

Basic Radio Group

A basic radio group lays out multiple radio items vertically.

Initiate outbound transfers Approve outbound transfers Export transactions 
<zn-radio-group label="Financial products permissions" name="a">
  <zn-radio value="initiate-outbound">Initiate outbound transfers</zn-radio>
  <zn-radio value="approve-outbound">Approve outbound transfers </zn-radio>
  <zn-radio value="export">Export transactions</zn-radio>
</zn-radio-group>

Help Text

Add descriptive help text to a radio group with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.

Initiate outbound transfers Approve outbound transfers Export transactions 
<zn-radio-group label="Financial products permissions" help-text="Outbound transfers require separate initiators and approvers" name="a">
  <zn-radio value="initiate-outbound">Initiate outbound transfers</zn-radio>
  <zn-radio value="approve-outbound">Approve outbound transfers </zn-radio>
  <zn-radio value="export">Export transactions</zn-radio>
</zn-radio-group>

Label with Tooltip

Use the label-tooltip attribute to add text that appears in a tooltip triggered by an info icon next to the label.

Initiate outbound transfers Approve outbound transfers Export transactions 
<zn-radio-group name="a" label="Financial products permissions" help-text="Outbound transfers require separate initiators and approvers" label-tooltip="These apply to cash account only">
  <zn-radio value="initiate-outbound">Initiate outbound transfers</zn-radio>
  <zn-radio value="approve-outbound">Approve outbound transfers </zn-radio>
  <zn-radio value="export">Export transactions</zn-radio>
</zn-radio-group>

Horizontal Radio Group

Use the horizontal attribute to lay out multiple radio items horizontally.

Manage transfers Export transactions 
<zn-radio-group name="a" id="permissions" label="Financial products permissions" horizontal>
  <zn-radio value="manage-transfers">Manage transfers</zn-radio>
  <zn-radio value="export">Export transactions</zn-radio>
</zn-radio-group>

<style>
  zn-radio-group[id="permissions"] {
    container-type: inline-size;
    container-name: permissions;
  }

  @container permissions (max-width: 400px) {
    zn-radio-group[id="permissions"]::part(form-control-input) {
      flex-direction: column;
    }
  }
</style>

Contained Radio Group

Use the contained attribute to draw a card-like container around each radio item in the radio group. This style is useful for giving more emphasis to the list of options.

This option can be combined with the horizontal attribute.

Initiate outbound transfers Approve outbound transfers Export transactions

Initiate outbound transfers Approve outbound transfers 
<zn-radio-group name="a" label="Financial products permissions" help-text="Outbound transfers require separate initiators and approvers" contained>
  <zn-radio value="initiate-outbound">Initiate outbound transfers</zn-radio>
  <zn-radio value="approve-outbound">Approve outbound transfers </zn-radio>
  <zn-radio value="export">Export transactions</zn-radio>
</zn-radio-group>
<br/>
<br/>
<zn-radio-group name="b" label="Financial products permissions" help-text="Outbound transfers require separate initiators and approvers" contained horizontal>
  <zn-radio value="initiate-outbound">Initiate outbound transfers</zn-radio>
  <zn-radio value="approve-outbound">Approve outbound transfers </zn-radio>
</zn-radio-group>

Disabling Options

Radios can be disabled by adding the disabled attribute to the respective options inside the radio group.

Initiate outbound transfers Approve outbound transfers Export transactions 
<zn-radio-group name="a"  label="Financial products permissions" help-text="Exporting is currently disabled for all users" required>
  <zn-radio value="initiate-outbound">Initiate outbound transfers</zn-radio>
  <zn-radio value="approve-outbound">Approve outbound transfers </zn-radio>
  <zn-radio value="export" disabled>Export transactions</zn-radio>
</zn-radio-group>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.0/dist/components/radio-group/radio-group.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.0/dist/components/radio-group/radio-group.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/radio-group/radio-group.js';

Slots

Name Description
(default) The default slot.
example An example slot.

Learn more about using slots.

Properties

Name Description Reflects Type Default
label The radio group’s label. Required for proper accessibility. If you need to display HTML, use the label slot instead. string ''
labelTooltip
label-tooltip 		Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the label-tooltip slot instead. string ''
helpText
help-text 		The radio groups’ help text. If you need to display HTML, use the help-text slot instead. string ''
name The name of the radio group, submitted as a name/value pair with form data. string ''
value The current value of the radio group, submitted as a name/value pair with form data. string ''
size The radio group’s size. This size will be applied to all child radios 'small' | 'medium' | 'large' 'medium'
horizontal The checkbox group’s orientation. Changes the group’s layout from the default (vertical) to horizontal. boolean false
contained The checkbox group’s style. Changes the group’s style from the default (plain) style to the ‘contained’ style. This style will be applied to all child checkboxes. boolean false
form By default, form controls are associated with the nearest containing <form> element. This attribute allows you to place the form control outside a form and associate it with the form that has this id. The form must be in the same document or shadow root for this to work. string ''
required Ensures a child radio is checked before allowing the containing form to submit. boolean false
validationMessage Gets the validation message - -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
zn-event-name Emitted as an example. -

Learn more about events.

Methods

Name Description Arguments
checkValidity() Checks for validity but does not show a validation message. Returns true when valid and false when invalid. -
getForm() Gets the associated form, if one exists. -
reportValidity() Checks for validity and shows the browser’s validation message if the control is invalid. -
setCustomValidity() Sets a custom validation message. Pass an empty string to restore validity. message:

Learn more about methods.

Custom Properties

Name Description Default
--example An example CSS custom property.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <zn-example>