Radio Button

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

Overview

Radio Buttons are simple designs used to take up small interface area that 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/no interactions, multi-select, 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 the Checkbox utility is optional.

For on/off or boolean interactions, please consider Switch.

Usage

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

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

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

calcite-radio-button
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
checkedchecked

The checked state of the radio button.

booleanA boolean property should be present, or not
truefalse
disableddisabled

The disabled state of the radio button.

booleanA boolean property should be present, or not
truefalse
guidguid

The id attribute of the radio button. When omitted, a globally unique identifier is used.

stringA custom string
undefined
hiddenhidden

The radio button's hidden status. When a radio button is hidden it is not focusable or checkable.

booleanA boolean property should be present, or not
truefalse
namename

The name of the radio button. `name` is passed as a property automatically from `calcite-radio-button-group`.

stringA custom string
undefined
requiredrequired

Requires that a value is selected for the radio button group before the parent form will submit.

booleanA boolean property should be present, or not
truefalse
scalescale

The scale (size) of the radio button. `scale` is passed as a property automatically from `calcite-radio-button-group`.

typedChoose from a set of typed values
lm (default)s
valuevalue

The value of the radio button.

required
typedChoose from a set of typed values
any

Events

NameDescriptionDetail
calciteRadioButtonChange

Fires 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.

bubblescomposedcancelable
any

Methods

NameDescriptionSignatureReturns
setFocus

Sets focus on the component.

setFocus() => Promise<void>Promise<void>

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