Radio Button Group

Radio Button Group allows you to switch between horizontal and vertical layouts of Radio Buttons.

Overview

Built of Radio Buttons, you can control the group's scale, layout, and state in a single wrapper.

Usage

  • Groups of Radio Buttons
  • Easy switching between vertical and horizontal layouts for responsive design

Sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<calcite-radio-button-group name="Options" layout="vertical">
    <calcite-label layout="inline">
        <calcite-radio-button value="trees"></calcite-radio-button>
        Trees
    </calcite-label>
    <calcite-label layout="inline">
        <calcite-radio-button value="shrubs"></calcite-radio-button>
        Shrubs
    </calcite-label>
    <calcite-label layout="inline">
        <calcite-radio-button value="flowers"></calcite-radio-button>
        Flowers
    </calcite-label>
    <calcite-label layout="inline">
        <calcite-radio-button value="groundcover"></calcite-radio-button>
        Groundcover
    </calcite-label>
    <calcite-label layout="inline">
        <calcite-radio-button value="bushes"></calcite-radio-button>
        Bushes
    </calcite-label>
</calcite-radio-button-group>
v3.0.3

Best practices

Below are important guidelines on using the Radio Button Group component.

Correct Radio Button content amount
Do use Radio Buttons in small groups.
Avoid Radio Button content amount
Avoid large radio button groups. Prefer Combobox for this type of selection.

Accessibility

Keyboard navigation

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

Writing and copy

  • Keep Radio Button tone and length consistent within groups
  • Avoid forming questions with Radio Button text

API reference

Properties

PropertyAttributeDescriptionTypeDefault
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
layoutlayoutDefines the layout of the component."grid" | "horizontal" | "vertical""horizontal"
namerequirednameSpecifies the name of the component on form submission. Must be unique to other component instances.string
requiredrequiredWhen true and the component resides in a form, the component must have a value in order for the form to submit.booleanfalse
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
selectedItemread-onlySpecifies the component's selected item.HTMLCalciteRadioButtonElement
statusstatusSpecifies the status of the validation message."idle" | "invalid" | "valid""idle"
validationIconvalidation-iconSpecifies the validation icon to display under the component.boolean | string
validationMessagevalidation-messageSpecifies the validation message to display under the component.string

Slots

NameDescription
default (unnamed)A slot for adding calcite-radio-buttons.

Events

NameDescriptionBehavior
calciteRadioButtonGroupChangeFires when the component has changed.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the fist focusable calcite-radio-button element in 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