@ui5/webcomponents-react/wrappers/webComponents/CheckBox/index.js

React Wrapper for UI5 Web Components and additional components

'use client';

import { withWebComponent } from '@ui5/webcomponents-react-base';
/**
 * Allows the user to set a binary value, such as true/false or yes/no for an item.
 *
 * The `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 `CheckBox`, the user has to click or tap the square
 * box or its label.
 *
 * The `CheckBox` component only has 2 states - checked and unchecked.
 * Clicking or tapping toggles the `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 truncate, set the `wrappingType` property to "None".
 * The touchable area for toggling the `CheckBox` ends where the text ends.
 *
 * You can disable the `CheckBox` by setting the `disabled` property to
 * `true`,
 * or use the `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 `CheckBox`.
 *
 * - [Space],[Enter] - Toggles between different states: checked, not checked.
 *
 *
 *
 * __Note:__ This is a UI5 Web Component! [CheckBox UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/CheckBox) | [Repository](https://github.com/UI5/webcomponents)
 */
const CheckBox = withWebComponent('ui5-checkbox', ['accessibleName', 'accessibleNameRef', 'name', 'text', 'value', 'valueState', 'wrappingType'], ['checked', 'disabled', 'displayOnly', 'indeterminate', 'readonly', 'required'], [], ['change']);
CheckBox.displayName = 'CheckBox';
export { CheckBox };