Checkbox
Checkboxes let the users select which items in a list to include. Each checkbox toggles on-click between checked and unchecked. TritonCheckbox can also be in an indeterminate state, which can be used, for instance, in nested checkbox structures.
Basic Usage
<triton-checkbox></triton-checkbox>
<triton-checkbox checked></triton-checkbox>
<TritonCheckbox/>
<TritonCheckbox checked/>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-checkbox></triton-checkbox>
<triton-checkbox checked></triton-checkbox>
</body>
</html>
Behavior
Indeterminate
A checkbox can be in an indeterminate state. This is often used in nested checkbox structures.
<triton-checkbox></triton-checkbox>
<triton-checkbox indeterminate></triton-checkbox>
<triton-checkbox checked></triton-checkbox>
Appearance
Checkbox Title
The TritonCheckbox has a slot, to which markup can be passed to describe the individual checkbox.
The other option is to use a simple textual title to describe the checkbox. To do this, pass a string directly to the title property.
<triton-checkbox title="This is a checkbox"></triton-checkbox>
Playground
API
Properties
| Property | Description | Type | Default |
|---|---|---|---|
auto-focus | If true the checkbox will have auto focus. When the site is loaded, the focus will automatically be set to the checkbox. Only one form element in a document can have the autofocus attribute | boolean | - |
title | Title for the label rendered inside the checkbox | string | - |
checked | If true, the checkbox is selected | boolean | false |
disabled | If true, the component will look disabled and not be interactable | boolean | false |
indeterminate | If true, the checkbox will visually appear as indeterminate | boolean | false |
name | The name of the control, which is submitted with the form data | string | - |
size | Set the size of the component | base body large medium small tiny xlarge xxlarge xxxlarge | 'body' |
value | The value of the checkbox | off on | 'on' |
Events
| Name | Type | Description | Extra |
|---|---|---|---|
| atBlur | CustomEvent<void> | Emitted when the checkbox loses focus | - |
| atChange | CustomEvent<{ value: any; checked: boolean; }> | Emitted when the checkbox is selected or deselected | - |
| atFocus | CustomEvent<void> | Emitted when the checkbox gains focus | - |
Slots
Main
If checkbox has no title, any element can be used in the slot. Otherwise title will prevent the slot from rendering
<triton-checkbox>
<div></div>
</triton-checkbox>