RadioButton

A RadioButton widget is a user interface component that allows users to select one option from a set. Represented by a small circle, 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 { WRadioButton } from "@cedro/ui/radiobutton.ui";
import { WContainer, WSpacer } from "@cedro/ui/container.ui";
import { createWidget } from "@cedro/ui/widget.builder";

export default (() => {
const handleRadio = (args: any) => {
console.log(args);
};

return createWidget(
<WContainer orientation="vertical">
    <WSpacer />
    <WContainer orientation="horizontal" fixedSize={45} padding={5}>
        <WSpacer />
        <WRadioButton id="r1" text="Switch One" checked onClick={handleRadio} />
        <WRadioButton id="r2" text="Switch Two" onClick={handleRadio} />
        <WRadioButton id="r3" text="Switch Three" onClick={handleRadio} />
        <WSpacer />
    </WContainer>
    <WSpacer />
</WContainer>
);

})();

Properties

The RadioButton 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 { RadioButton } from "@cedro/ui";

const radio: RadioButton = new RadioButton("my-radio", "option 1");

radio.setState(true);

TSX Example

src/main.tsx

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

<WRadioButton id="my-radio" text="option 1" checked />