Version: 2.1.1

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 A

Radio B

Radio C

Radio 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 disabled

Radio disabled checked

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

Playground

API

Properties

triton-radio

Property	Description	Type	Default
`auto-focus`	^{When the component is loaded, the radio will automatically get focus.Only one form element in a document can have the autofocus attribute}	`boolean`	-
`checked`	^{If true, the radio is selected}	`boolean`	`false`
`disabled`	^{If true, the component will look disabled and not be interactable}	`boolean`	`false`
`name`	^{The name of the control, which is submitted with the form data}	`string`	-
`value`	^{A DOMString representing the value of the radio button. This will be the output value of the radio. The value is not rendered}	`string`	-

triton-radio-group

Property	Description	Type	Default
`horizontal`	^{If true the group will be rendered horizontaly}	`boolean`	`true`
`name`	^{Name of the radio group. This name is not rendered in the dom}	`string`	-
`size`	^{Set the size of the Radio Group}	`base` `body` `large` `medium` `small` `tiny` `xlarge` `xxlarge` `xxxlarge`	`defaultOptions.baseSize`

Events

Name	Type	Description	Extra
atBlur	`CustomEvent<void>`	Emitted when the radio loses focus	-
atChange	`CustomEvent<ToggleChangeEventDetail>`	Emitted when the radio button is selected	-
atFocus	`CustomEvent<void>`	Emitted when the radio has focus	-
atInput	`CustomEvent<KeyboardEvent>`	Emitted when a keyboard input occurred	-

Slots

Main

takes any kind of markup element

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

Radio

Basic Usage​

Variants​

Radio Group​

Behavior​

Disabled​

Playground​

API​

Properties​

triton-radio​

triton-radio-group​

Events​

Slots​

Main​