Radio Item
<quiet-radio-item>
Radio items represent individual choices within a radio.
This component must only be used within a radio. You can see some examples of radio items being used in the radio documentation.
API Jump to heading
Importing Jump to heading
The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.
To manually import <quiet-radio-item> from the CDN, use the following code.
import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/radio-item/radio-item.js';
To manually import <quiet-radio-item> from npm, use the following code.
import '@quietui/quiet/dist/components/radio-item/radio-item.js';
Slots Jump to heading
Radio Item supports the following slots. Learn more about using slots
| Name | Description |
|---|---|
| (default) |
The radio item's label. For plain-text labels, you can use the label attribute instead.
|
Properties Jump to heading
Radio Item has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties
| Property / Attribute | Description | Reflects | Type | Default |
|---|---|---|---|---|
label
|
The radio item's label. If you need to provide HTML in the label, use the label slot
instead.
|
|
string
|
|
description
|
The radio item's description. If you need to provide HTML in the description, use the
description slot instead.
|
|
string
|
|
value
|
The radio item's value. |
|
string
|
''
|
checked
|
The radio item's checked state. |
|
boolean
|
false
|
disabled
|
Disables the radio item. |
|
boolean
|
false
|
appearance
|
The type of radio item to render. |
|
'normal'
|
'normal'
|
size
|
The radio item's size. |
|
'xs'
|
'md'
|
Methods Jump to heading
Radio Item supports the following methods. You can obtain a reference to the element and call them like functions in JavaScript. Learn more about methods
| Name | Description | Arguments |
|---|---|---|
checkValidity() |
Checks if the form control has any restraints and whether it satisfies them. If invalid,
false will be returned and the invalid event will be dispatched. If valid,
true will be returned.
|
|
reportValidity() |
Checks if the form control has any restraints and whether it satisfies them. If invalid,
false will be returned and the invalid event will be dispatched. In
addition, the problem will be reported to the user. If valid, true will be returned.
|
Events Jump to heading
Radio Item dispatches the following custom events. You can listen to them the same way was native events. Learn more about custom events
| Name | Description |
|---|---|
quiet-blur |
Emitted when the radio item loses focus. This event does not bubble. |
quiet-focus |
Emitted when the radio item receives focus. This event does not bubble. |
CSS parts Jump to heading
Radio Item exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts
| Name | Description | CSS selector |
|---|---|---|
label |
The <label> that wraps the entire control. |
::part(label)
|
visual-box |
The element that wraps the internal radio. |
::part(visual-box)
|
radio-icon |
The radio icon, a <quiet-icon> element. |
::part(radio-icon)
|
radio-icon__svg |
The radio icon's svg part. |
::part(radio-icon__svg)
|
Custom States Jump to heading
Radio Item has the following custom states. You can target them with CSS using the selectors shown below. Learn more about custom states
| Name | Description | CSS selector |
|---|---|---|
checked |
Applied when the radio item is checked. |
:state(checked)
|
disabled |
Applied when the radio item is disabled. |
:state(disabled)
|
focused |
Applied when the radio item has focus. |
:state(focused)
|
Dependencies Jump to heading
Radio Item automatically imports the following elements. Sub-dependencies are also included in this list.