index-CheckBox.tsx.txt

// register Metro design fonts
import "com.sweaxizone.metro/fonts";

// third-party
import { createRoot } from "react-dom/client";
import * as React from "react";
import {
  Root,
  Group,
  HGroup,
  VGroup,
  Button,
  Label,
  Icon,
  CheckBox,
  FormGroup,
} from "com.sweaxizone.metro/components";
import { RTLProvider } from "com.sweaxizone.metro/layout";
import {
  Primary,
  ThemePresets,
  ThemeProvider,
  type Theme,
} from "com.sweaxizone.metro/theme";

/**
 * The test.
 */
function App() {
  const [checked, set_checked] = React.useState<boolean>(false);

  return (
    <ThemeProvider theme={ThemePresets.get("dark")}>
      <RTLProvider rtl={false}>
        <Primary prefer={false}>
          <Root
            full
            solid
            selection={false}
            style={{
              overflowY: "auto",
            }}>
            <VGroup padding={10}>
              <FormGroup>
                <Label bold for="c1">{checked ? "On" : "Off"}</Label>
                <CheckBox id="c1" default={false} change={v => {set_checked(v)}}/>
              </FormGroup>
            </VGroup>
          </Root>
        </Primary>
      </RTLProvider>
    </ThemeProvider>
  );
}

// Render App
const root = createRoot(document.getElementById("root")!);
root.render(<App />);