Edit in GitHubLog an issue

sp-radio-group

Since: UXP 4.1, PS 22.0.0

Renders a group of radio buttons horizontally or vertically (column layout), with an optional field label.

Radio groups

See:

Example

Copied to your clipboard
1<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 clipboard
1<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 clipboard
1document.querySelector(".yourRadioGroup").addEventListener("change", evt => {
2 console.log(`Selected item: ${evt.target.value}`);
3})
Copyright © 2021 Adobe. All rights reserved.