Checkbox

A checkbox widget is a user interface component that allows users to select one or multiple options from a set. Represented by a small square, it can be checked or unchecked and generally has an associated text label.

TS Example

src/main.ts

import { Checkbox } from "@cedro/ui";

const chk: Checkbox = new Checkbox("my-chk", "option 1");

chk.setState(true);

TSX Example

src/main.tsx

import { WCheckbox } from "@cedro/ui/checkbox.ui";
import { WContainer, WSpacer } from "@cedro/ui/container.ui";
import { createWidget } from "@cedro/ui/widget.builder";

export default createWidget(
<WContainer orientation="vertical">
<WSpacer />
<WContainer orientation="horizontal" fixedSize={45} padding={5}>
    <WSpacer />
    <WCheckbox text="Switch One" checked />
    <WCheckbox text="Switch Two" />
    <WCheckbox text="Switch Three" />
    <WSpacer />
</WContainer>
<WSpacer />
</WContainer>
);

Properties

The Checkbox widget inherits from ToggleButton class → Has all ToggleButton properties.

Constructor

Parameter	Type	Required	Description
id	string	yes	The id of the widget
text	string	yes	The label of the widget
parent	Widget	no	The parent of the widget. Default is null