Skip to main content
5.0.3Next5.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: 5.0.3

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

PropertyDescriptionTypeDefault
auto-focusIf 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 attributeboolean-
titleTitle for the label rendered inside the checkboxstring-
checkedIf true, the checkbox is selectedbooleanfalse
disabledIf true, the component will look disabled and not be interactablebooleanfalse
indeterminateIf true, the checkbox will visually appear as indeterminatebooleanfalse
nameThe name of the control, which is submitted with the form datastring-
sizeSet the size of the componentbase body large medium small tiny xlarge xxlarge xxxlarge'body'
valueThe value of the checkboxoff on'on'

Events

NameTypeDescriptionExtra
atBlurCustomEvent<void>Emitted when the checkbox loses focus-
atChangeCustomEvent<{ value: any; checked: boolean; }>Emitted when the checkbox is selected or deselected-
atFocusCustomEvent<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>

Details

Used in