Radio Button

Radio Buttons are circular actions used to make single-choice decisions.

Overview

Radio Buttons are designed to take up small interface area, which can fit within a multitude of workflows. Radio Buttons always have one selected item, denoted with a filled Brand color. You can use Radio Button Group as a convenient utility for layout and group configurations.

For "yes" and "no" interactions, multiple selections, and interactions where a choice is optional, please consider Checkbox. The key difference between a checkbox and radio is that radios must always have something active, whereas a checkbox is optional.

For "on" and "off" or boolean interactions, please consider Switch.

Usage

  • Various interactions where a single choice needs to be made
  • Forms

Sample

1
2
3
4
<calcite-label layout="inline">
    <calcite-radio-button value="maps"></calcite-radio-button>
    Maps
</calcite-label>
v3.0.3

Accessibility

Radio Button should be accompanied by a Label, which provides context of the intent to support assistive technologies.

Keyboard navigation

When Radio Buttons are presented with the same name property value, or contained in a Radio Button Group:

KeyFunction
Arrow leftMoves focus and selection to previous item. If the current focus and selection is the first item, the focus and selection will cycle to the last item.
Arrow rightMoves focus and selection to next item. If the current focus and selection is the last item, the focus and selection will cycle to the first item.
Arrow downMoves focus and selection to previous item. If the current focus and selection is the first item, the focus and selection will cycle to the last item.
Arrow upMoves focus and selection to next item. If the current focus and selection is the last item, the focus and selection will cycle to the first item.
TabMoves focus in and out of component.
Tab and ShiftMoves focus in and out of component.

Writing and copy

Correct Radio Button content length
Do prefer brevity in Radio Buttons.
Avoid Radio Button content length
Avoid tying Radio Button choices to long sentences or paragraphs.
  • Keep labels for Radio Buttons simple and succinct
  • Do not use contractions (you're, aren't, can't, haven't) for Radio Button labels in order to reduce confusion
  • Avoid writing Radio Button text as questions.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
checkedcheckedWhen true, the component is checked.booleanfalse
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
formformThe id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any.string
namenameSpecifies the name of the component. Can be inherited from calcite-radio-button-group. Required to pass the component's value on form submission.string
requiredrequiredWhen true and the component resides in a form, the component must have a value selected from the calcite-radio-button-group in order for the form to submit.booleanfalse
scalescaleSpecifies the size of the component inherited from the calcite-radio-button-group."l" | "m" | "s""m"
valuerequiredvalueThe component's value.any

Events

NameDescriptionBehavior
calciteRadioButtonChangeFires only when the radio button is checked. This behavior is identical to the native HTML input element. Since this event does not fire when the radio button is unchecked, it's not recommended to attach a listener for this event directly on the element, but instead either attach it to a node that contains all of the radio buttons in the group or use the calciteRadioButtonGroupChange event if using this with calcite-radio-button-group.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component.setFocus(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close