sp-radio-group
Since: UXP v4.1
Renders a group of radio buttons horizontally or vertically (column layout), with an optional field label.
See:
- https://spectrum.adobe.com/page/radio-button/
- https://opensource.adobe.com/spectrum-web-components/components/radio
Example
Copied to your clipboard1<sp-radio-group>2 <sp-label slot="label">Select a product:</sp-label>3 <sp-radio value="ps">Adobe Photoshop</sp-radio>4 <sp-radio value="xd">Adobe XD</sp-radio>5</sp-radio-group>
Layout
By default, radio groups are laid out horizontally. If you add the column
attribute, the radio group will be laid out vertically.
Copied to your clipboard1<sp-radio-group column>2 <sp-radio value="ps">Adobe Photoshop</sp-radio>3 <sp-radio value="xd">Adobe XD</sp-radio>4</sp-radio-group>
Responding to events
You can respond to changes in the radio group using the change
event.
Copied to your clipboard1document.querySelector(".yourRadioGroup").addEventListener("change", evt => {2 console.log(`Selected item: ${evt.target.value}`);3})