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.
<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
<triton-radio disabled>Radio disabled</triton-radio>
<triton-radio disabled cheched>Radio disabled checked</triton-radio>
Playground
API
Properties
TritonRadio
| 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 | - |
TritonRadioGroup
| 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 | 'body' |
Events
Main Component
| 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 | - |
TritonRadioGroup
| Name | Type | Description | Extra |
|---|---|---|---|
| atChange | CustomEvent<ToggleChangeEventDetail> | Emitted when the radio button is selected or deselected | - |
Slots
Main
takes any kind of markup element
<triton-radio>
<div></div>
</triton-radio>