CheckBox with Text Wrapping
OverviewAllows the user to set a binary value, such as true/false or yes/no for an item.
ui5-checkboxcomponent 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.
ui5-checkboxcomponent only has 2 states - checked and unchecked. Clicking or tapping toggles the
ui5-checkboxbetween checked and unchecked state.
UsageYou can manually set the width of the element containing the box and the label using the
widthproperty. If the text exceeds the available width, it is truncated. The touchable area for toggling the
ui5-checkboxends where the text ends.
You can disable the
ui5-checkboxby setting the
true, or use the
ui5-checkboxin read-only mode by setting the
ES6 Module Import
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.
Note: The property can be changed with user interaction, either by cliking/tapping on the
ui5-checkbox, or by pressing the Enter or Space key.
Note: A disabled
ui5-checkboxis completely noninteractive.
ui5-checkboxwill be submitted in an HTML form.
Important: For the
nameproperty to have effect, you must add the following import to your project:
Note: When set, a native
inputHTML element will be created inside the
ui5-checkboxso that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form.
Note: A red-only
ui5-checkboxis not editable, but still provides visual feedback upon user interaction.
Note: Available options are
ui5-checkboxtext wraps when there is not enough space.
Note: By default, the text truncates when there is not enough space.
This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as
ui5-checkboxchecked state changes.