Radio Group
<zn-radio-group> | ZnRadioGroup
Short summary of the component’s intended use.
<zn-radio-group></zn-radio-group>
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-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
|
''
|
|
helpText
help-text
|
The radio groups’s 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
|
'option'
|
|
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'
|
form
|
By default, form controls are associated with the nearest containing
<form> element. This attribute allows you to place the form control outside of 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>