CheckBox

@ui5/webcomponents
<ui5-checkbox>

Basic CheckBox

<ui5-checkbox text="Chocolate" checked></ui5-checkbox>
<ui5-checkbox text="Strawberry" checked></ui5-checkbox>
<ui5-checkbox text="Waffles" checked value-state="Error"></ui5-checkbox>
<ui5-checkbox text="Cake" checked value-state="Warning"></ui5-checkbox>
	

CheckBox states

<ui5-checkbox text="Success" value-state="Success"></ui5-checkbox>
<ui5-checkbox text="Error" value-state="Error"></ui5-checkbox>
<ui5-checkbox text="Warning" value-state="Warning"></ui5-checkbox>
<ui5-checkbox text="Information" value-state="Information"></ui5-checkbox>
<ui5-checkbox text="Disabled" disabled checked></ui5-checkbox>
<ui5-checkbox text="Readonly" readonly checked></ui5-checkbox>
<ui5-checkbox text="Success disabled" disabled value-state="Success" checked></ui5-checkbox>
<ui5-checkbox text="Error disabled" disabled value-state="Error" checked></ui5-checkbox>
<ui5-checkbox text="Warning disabled " disabled value-state="Warning" checked></ui5-checkbox>
<ui5-checkbox text="Information disabled " disabled value-state="Information" checked></ui5-checkbox>
<ui5-checkbox text="Success readonly" readonly value-state="Success" checked></ui5-checkbox>
<ui5-checkbox text="Error readonly" readonly value-state="Error" checked></ui5-checkbox>
<ui5-checkbox text="Warning readonly" readonly value-state="Warning" checked></ui5-checkbox>
<ui5-checkbox text="Information readonly" readonly value-state="Information" checked></ui5-checkbox>
<ui5-checkbox text="Success indeterminate" value-state="Success" indeterminate checked></ui5-checkbox>
<ui5-checkbox text="Error indeterminate" value-state="Error" indeterminate checked></ui5-checkbox>
<ui5-checkbox text="Warning indeterminate" value-state="Warning" indeterminate checked></ui5-checkbox>
<ui5-checkbox text="Information indeterminate" value-state="Information" indeterminate checked></ui5-checkbox>
	

CheckBox with Text Wrapping

<ui5-checkbox text="ui5-checkbox with 'wrapping-type=Normal' set and some long text." wrapping-type="Normal" style="width:200px"></ui5-checkbox>
<ui5-checkbox text="Another ui5-checkbox with very long text here" wrapping-type="Normal" style="width:200px"></ui5-checkbox>
	

CheckBox with indeterminate


<ui5-checkbox id="result-cb" text="Select / deselect all" indeterminate checked></ui5-checkbox>
<hr />
<div style="display: flex; flex-direction: column; align-items: flex-start;">
	<ui5-checkbox id="cb1" text="English" checked></ui5-checkbox>
	<ui5-checkbox id="cb2" text="German"></ui5-checkbox>
	<ui5-checkbox id="cb3" text="French"></ui5-checkbox>
</div>
<script>
	var resultCb = document.querySelector("#result-cb");
	var langCbs = Array.from(document.querySelectorAll("[id^=cb]"));

	langCbs.forEach(function (cbEl) {
		cbEl.addEventListener("change", function (event) {
			const hasChecked = langCbs.some(function (cb) { return cb.checked });
			const hasUnchecked = langCbs.some(function (cb) { return !cb.checked });

			resultCb.indeterminate = hasChecked && hasUnchecked;
			resultCb.checked = hasChecked;
		});
	});

	resultCb.addEventListener("change", function (event) {
		langCbs.forEach(function (cb) {
			cb.checked = event.target.checked;
		});
	});
</script>
	

Overview

Allows the user to set a binary value, such as true/false or yes/no for an item.

The ui5-checkbox component consists of a box and a label that describes its purpose. If it's checked, an indicator is displayed inside the box. To check/uncheck the ui5-checkbox, the user has to click or tap the square box or its label.

The ui5-checkbox component only has 2 states - checked and unchecked. Clicking or tapping toggles the ui5-checkbox between checked and unchecked state.

Usage

You can define the checkbox text with via the text property. If the text exceeds the available width, it is truncated by default. In case you prefer text to wrap, set the wrappingType property to "Normal". The touchable area for toggling the ui5-checkbox ends where the text ends.

You can disable the ui5-checkbox by setting the disabled property to true, or use the ui5-checkbox in read-only mode by setting the readonly property to true.

Keyboard Handling

The user can use the following keyboard shortcuts to toggle the checked state of the ui5-checkbox.
  • [SPACE, ENTER] - Toggles between different states: checked, not checked.


ES6 Module Import

import "@ui5/webcomponents/dist/CheckBox";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
checked
boolean
false
Defines if the component is checked.

Note: The property can be changed with user interaction, either by cliking/tapping on the component, or by pressing the Enter or Space key.
disabled
boolean
false
Defines whether the component is disabled.

Note: A disabled component is completely noninteractive.
indeterminate
boolean
false
Defines whether the component is displayed as partially checked.

Note: The indeterminate state can be set only programatically and can’t be achieved by user interaction and the resulting visual state depends on the values of the indeterminate and checked properties:
  • If the component is checked and indeterminate, it will be displayed as partially checked
  • If the component is checked and it is not indeterminate, it will be displayed as checked
  • If the component is not checked, it will be displayed as not checked regardless value of the indeterminate attribute
since v1.0.0-rc.15
name
string
""
Determines the name with which the component will be submitted in an HTML form.

Important: For the name property to have effect, you must add the following import to your project: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";

Note: When set, a native input HTML element will be created inside the component so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form.
readonly
boolean
false
Defines whether the component is read-only.

Note: A red-only component is not editable, but still provides visual feedback upon user interaction.
text
string
""
Defines the text of the component.
valueState
value-state
ValueState
"None"
Defines the value state of the component.

Note:
  • Warning
  • Error
  • None(default)
  • Success
  • Information
wrappingType
wrapping-type
WrappingType
"None"
Defines whether the component text wraps when there is not enough space.

Available options are:
  • None - The text will be truncated with an ellipsis.
  • Normal - The text will wrap. The words will not be broken based on hyphenation.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
change
Fired when the component checked state changes.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White Horizon
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel