Skip to main content
Docs
Components
Foundation
NextNext5.1.05.0.35.0.25.0.15.0.04.0.94.0.84.0.73.2.03.1.03.0.13.0.02.1.12.0.101.0.0
Version: Next

Radio

The radio component is used when the user is selecting between different options. They differ from checkboxes in that the user is only able to select one option at the time, but can otherwise be used in similar circumstances.

Basic Usage​

<triton-radio></triton-radio>
<triton-radio></triton-radio>
<triton-radio></triton-radio>
<triton-radio></triton-radio>
<TritonRadio/>
<TritonRadio/>
<TritonRadio/>
<TritonRadio/>
<html> 
  <head> 
    <script type="module"> 
      import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js'; 
      defineCustomElements(); 
    </script> 
  </head> 
  <body> 
    <triton-radio></triton-radio>
    <triton-radio></triton-radio>
    <triton-radio></triton-radio>
    <triton-radio></triton-radio>
  </body> 
</html>
<triton-radio></triton-radio>
<triton-radio></triton-radio>
<triton-radio></triton-radio>
<triton-radio></triton-radio>

Variants​

Radio Group​

TritonRadioButtons should be grouped in a TritonRadioGroup.

Radio ARadio BRadio CRadio D
<triton-radio-group>
  <triton-radio>Radio A</triton-radio>
  <triton-radio>Radio B</triton-radio>
  <triton-radio>Radio C</triton-radio>
  <triton-radio>Radio D</triton-radio>
</triton-radio-group>

Behavior​

Disabled​

The radio buttons can also be disabled

Radio disabledRadio disabled checked
<triton-radio disabled>Radio disabled</triton-radio>
<triton-radio disabled checked>Radio disabled checked</triton-radio>

Playground​

API​

Properties​

TritonRadio​

PropertyDescriptionTypeDefault
auto-focusWhen the component is loaded, the radio will automatically get focus.Only one form element in a document can have the autofocus attributeboolean-
checkedIf true, the radio is selectedbooleanfalse
disabledIf true, the component will look disabled and not be interactablebooleanfalse
nameThe name of the control, which is submitted with the form datastring-
valueA DOMString representing the value of the radio button. This will be the output value of the radio. The value is not renderedstring-

TritonRadioGroup​

PropertyDescriptionTypeDefault
horizontalIf true the group will be rendered horizontaly Deprecationbooleantrue
nameName of the radio group. This name is not rendered in the domstring-
orientationOrientation of the radio fields in the grouphorizontal vertical'vertical'
sizeSet the size of the Radio Groupbase body large medium small tiny xlarge xxlarge xxxlarge'body'

Events​

Main Component​

NameTypeDescriptionExtra
atBlurCustomEvent<void>Emitted when the radio loses focus-
atChangeCustomEvent<string>Emitted when the radio button is selected-
atFocusCustomEvent<void>Emitted when the radio has focus-
atInputCustomEvent<KeyboardEvent>Emitted when a keyboard input occurred-

TritonRadioGroup​

NameTypeDescriptionExtra
atChangeCustomEvent<ToggleChangeEventDetail>[object Object]

Slots​

Main​

takes any kind of markup element

<triton-radio>
  <div></div>
</triton-radio>