Switch

A Switch widget is a user interface component that allows users to select one option from a set. Represented by a small switch, 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 { WSwitch } from "@cedro/ui/switch.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 />
    <WSwitch text="Switch One" checked />
    <WSwitch text="Switch Two" />
    <WSwitch text="Switch Three" />
    <WSpacer />
</WContainer>
<WSpacer />
</WContainer>
);

Properties

The Switch 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

TS Example

src/main.ts

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

const switch: Switch = new Switch("my-switch", "option 1");

switch.setState(true);

TSX Example

src/main.tsx

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

<WSwitch id="my-switch" text="option 1" checked />