Switch
Switches let users toggle some setting between two states in the UI. This can be used for creating toggblable settings, e.g. enabling advanced settings, or choosing between day and dusk theme. Switches are only useful when the user can toggle between one of two valid states. Checboxes can, however, be a better alternative than using multiple switches in a list.
Basic Usage
<triton-switch></triton-switch>
<triton-switch checked></triton-switch>
<TritonSwitch></TritonSwitch>
<TritonSwitch checked></TritonSwitch>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-switch></triton-switch>
<triton-switch checked></triton-switch>
</body>
</html>
Appearance
Internal Icons
By using the checked-icon and unchecked-icon properties, you can set custom icons for the switch.
<triton-switch checked-icon="check" unchecked-icon="close"></triton-switch>
Text Inside Switch
By using the checked-text and unchecked-text properties, you can set custom text within the switch depending on its state.
<triton-switch unchecked-text="ABC" checked-icon="DEF"></triton-switch>
Playground
API
Properties
| Property | Description | Type | Default |
|---|---|---|---|
auto-focus | Set focus when component mounted if true | boolean | false |
checked | Set state of the switch | boolean | false |
checked-icon | Display icon inside the switch when the state is checked | Icon | - |
checked-text | Display text inside the switch when the state is checked | string | - |
classes | Append custom classes to the switch | string | - |
disabled | Disable the switch | boolean | false |
loading | Show a loading icon when true | boolean | false |
size | Set the size of the component | base body large medium small tiny xlarge xxlarge xxxlarge | defaultOptions.baseSize |
title | Title for the label in the switch. | string | - |
unchecked-icon | Display icon inside the switch when the state is unchecked | Icon | - |
unchecked-text | Display text inside the switch when the state is unchecked | string | - |
Events
| Name | Type | Description | Extra |
|---|---|---|---|
| atChange | CustomEvent<BooleanChangeEventDetail> | Trigger when data has change | - |
Slots
Main
takes any markup element if there is no title present
<triton-switch>
<div></div>
</triton-switch>