Edit in GitHubLog an issue

sp-radio

Since: UXP 4.1, PS 22.0.0

Renders a radio button with associated label.

Radio groups

See:

Example

Copied to your clipboard
<sp-radio value="ps">Adobe Photoshop</sp-radio>

Variants and states#

There are several different variants and states for radio buttons.

Checked#

Indicates that the radio button is selected.

Copied to your clipboard
<sp-radio checked value="ps">Adobe Photoshop</sp-radio>

Disabled#

Indicates that the radio button is disabled.

Copied to your clipboard
<sp-radio disabled value="ps">Adobe Photoshop</sp-radio>

Invalid#

Indicates that the radio button selection is invalid.

Copied to your clipboard
<sp-radio invalid value="ps">Adobe Photoshop</sp-radio>

Emphasized#

Indicates that the radio button selection is emphasized.

Copied to your clipboard
<sp-radio emphasized value="ps">Adobe Photoshop</sp-radio>

Responding to events#

You can respond to clicks on the radio button using the click event.

Copied to your clipboard
1document.querySelector(".yourRadioButton").addEventListener("click", evt => {
2 console.log(`You clicked: ${evt.target.value}`);
3})
Copyright © 2021 Adobe. All rights reserved.