Radio
Examples
First Example
Second Example
Importing
Slots
Properties
Events
Methods
Parts
Dependencies

Radio

<zn-radio> | ZnRadio

Since 1.0

experimental

Short summary of the component’s intended use.

<zn-radio></zn-radio>

Examples

First Example

TODO

Second Example

TODO

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/radio.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/radio.js';

To import this component using a bundler:

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

Slots

Name	Description
(default)	The radio’s label.
`description`	A description of the radio’s label. Serves as help text for a radio item. Alternatively, you can use the `description` attribute.
`selected-content`	Use to nest rich content (like an input) inside a selected radio item. Use only with the contained style.

Learn more about using slots.

Properties

Name	Description	Type	Default
`name`	The name of the radio, submitted as a name/value pair with form data.	`string`	`''`
`value`	The current value of the radio, submitted as a name/value pair with form data.	`string`	-
`size`	The radio’s size.	`'small' \| 'medium' \| 'large'`	`'medium'`
`disabled`	Disables the radio.	`boolean`	`false`
`checked`	Draws the radio in a checked state.	`boolean`	`false`
`contained`	Draws a container around the radio.	`boolean`	`false`
`horizontal`	Applies styles relevant to radios in a horizontal layout.	`boolean`	`false`
`defaultChecked`	The default value of the form control. Primarily used for resetting the form control.	`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`	Makes the radio a required field.	`boolean`	`false`
`description`	The radio’s help text. If you need to display HTML, use the `description` slot instead.	`string`	`''`
`validity`	Gets the validity state object	-	-
`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	Description	Event Detail
`zn-blur`	Emitted when the radio loses focus.	-
`zn-change`	Emitted when the checked state changes.	-
`zn-focus`	Emitted when the radio gains focus.	-
`zn-input`	Emitted when the radio receives input.	-
`zn-invalid`	Emitted when the form control has been checked for validity and its constraints aren’t satisfied.	-

Learn more about events.

Methods

Name	Description	Arguments
`click()`	Simulates a click on the radio.	-
`focus()`	Sets focus on the radio.	`options: FocusOptions`
`blur()`	Removes focus from the radio.	-
`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. The value provided will be shown to the user when the form is submitted. To clear the custom validation message, call this method with an empty string.	`message: string`

Learn more about methods.

Parts

Name	Description
`base`	The component’s base wrapper.
`control`	The square container that wraps the radio’s checked state.
`control--checked`	Matches the control part when the radio is checked.
`checked-icon`	The checked icon, an `<zn-icon>` element.
`label`	The container that wraps the radio’s label.
`description`	The container that wraps the radio’s description.
`selected-content`	The container that wraps optional content that appears when a radio is checked.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<zn-example>
<zn-icon>