The Placer Toolkit alpha has
arrived! 🎉
Plenty of changes are coming your
way—some big, some breaking, some
even nuclear! Beware the changelog…
Radio
<pc-radio> Radios allow the user to select a single option from a radio group.
Additional demonstrations can be found in the radio group demos.
Properties#
| Name | Description | Reflects | Default |
|---|---|---|---|
value | The radio’s value. When selected, the radio group will receive this value. Type: string | undefined |
| ‐ |
size | The radio’s size. When used inside a radio group, the size will be determined by the radio group’s size so this attribute can typically be omitted. Type: "small" | "medium" | "large" |
| "medium" |
disabled | Disables the radio. Type: boolean |
| false |
updateComplete | A read‐only promise that resolves when the component has finished updating. | ‐ |
Learn more about attributes and properties.
Slots#
| Name | Description |
|---|---|
| (default) | The radio’s label. |
Learn more about using slots.
Events#
| Name | Description | Event detail |
|---|---|---|
pc-focus | Emitted when the radio gains focus. | ‐ |
pc-blur | Emitted when the radio loses focus (i.e., is blurred). | ‐ |
Learn more about events.
Parts#
| Name | Description |
|---|---|
base | The component’s base wrapper. |
control | The circular container that wraps the radio’s checked state. |
control-checked | The circular container that wraps the radio’s checked state only if it’s checked. |
checked-icon | The checked icon, an <svg> element. |
label | The radio’s label. |
Learn more about customising CSS parts.
Importing#
If you’re using the autoloader or the standard loader, you can skip this section. But if you’re cherry picking, you can use any of the following snippets to import this component.
To manually import this component from the CDN, copy this code snippet and paste it in your HTML.
<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.1/cdn/components/radio/radio.js"></script>To manually import this component from the CDN, copy this code snippet and paste it in your JavaScript file.
import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.1/cdn/components/radio/radio.js";To manually import this component from npm, copy this code snippet and paste it in your JavaScript file.
import "placer-toolkit/dist/components/radio/radio.js";