Calcite Radio Button events

MichelleStuart — Tue, 12 May 2026 17:41:42 GMT

I feel like I must be missing something staring me right in the face, but when I copy the code from the calcite website for the radio button group into react, add an oncalciteRadioButtonGroupChange event listener, and console log the event.target.value, I get undefined. If I log the event, I cannot see any hint of which radio button was clicked to trigger the event.

What am I missing?

const handleSelection = (evt) => { console.log('group change', evt.target.value) } return ( <calcite-radio-button-group oncalciteRadioButtonGroupChange={handleSelection} name="impairment" layout="vertical"> <calcite-label layout="inline"> <calcite-radio-button checked={selectedImpairment === 'phosphorus'} value="phosphorus"></calcite-radio-button> Phosphorus </calcite-label> <calcite-label layout="inline"> <calcite-radio-button checked={selectedImpairment === 'fecal-indicator-bacteria'} value="fecal-indicator-bacteria"></calcite-radio-button> Fecal indicator bacteria </calcite-label> <calcite-label layout="inline"> <calcite-radio-button checked={selectedImpairment === 'biological-integrity'} value="biological-integrity"></calcite-radio-button> Biological integrity </calcite-label> </calcite-radio-button-group>

Re: Calcite Radio Button events

MichelleStuart — Tue, 12 May 2026 20:01:08 GMT

Mel let me know the solution! Instead of using event.target.value, use event.target.selectedItem.value.

topic Re: Calcite Radio Button events in ArcGIS JavaScript Maps SDK Questions

Calcite Radio Button events

Re: Calcite Radio Button events