Switch

import { Switch } from "@grassroot/ui-react";
import * as React from "react";
const switchFixture = {
  id: "switch",
  label: "Deploy on merge",
  description: "Ship prod when CI passes on main",
  checked: true,
} satisfies {
  id: string;
  label: string;
  description: string;
  checked: boolean;
};
 
export default function SwitchDemo() {
  const [on, setOn] = React.useState<boolean>(switchFixture.checked);
 
  return (
    <div>
      <Switch
        label={switchFixture.label}
        description={switchFixture.description}
        checked={on}
        onChange={(e) => setOn(e.target.checked)}
      />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
import { Switch } from "@grassroot/ui-vue";
const switchFixture = {
  id: "switch",
  label: "Deploy on merge",
  description: "Ship prod when CI passes on main",
  checked: true,
} satisfies {
  id: string;
  label: string;
  description: string;
  checked: boolean;
};
 
const on = ref(switchFixture.checked);
function onChange(event: Event) {
  on.value = (event.target as HTMLInputElement).checked;
}
</script>
 
<template>
  <Switch :checked="on" @change="onChange">
    <template #label>{{ switchFixture.label }}</template>
    <template #description>{{ switchFixture.description }}</template>
  </Switch>
</template>

import { Component, signal } from "@angular/core";
import { GrassrootSwitch } from "@grassroot/ui-angular";
const switchFixture = {
  id: "switch",
  label: "Deploy on merge",
  description: "Ship prod when CI passes on main",
  checked: true,
} satisfies {
  id: string;
  label: string;
  description: string;
  checked: boolean;
};
 
@Component({
  selector: "app-switch-demo",
  standalone: true,
  imports: [GrassrootSwitch],
  template: `
    <grassroot-switch
      [checked]="on()"
      [label]="fixture.label"
      [description]="fixture.description"
      (checkedChange)="on.set($event.checked)"
    />
  `,
})
export class SwitchDemoComponent {
  protected readonly fixture = switchFixture;
  protected readonly on = signal<boolean>(switchFixture.checked);
}
 
export default SwitchDemoComponent;

<script lang="ts">
  import { Switch } from "@grassroot/ui-svelte";
  const switchFixture = {
    id: "switch",
    label: "Deploy on merge",
    description: "Ship prod when CI passes on main",
    checked: true,
  } satisfies {
    id: string;
    label: string;
    description: string;
    checked: boolean;
  };
 
  let on = $state(switchFixture.checked);
  function onChange(event: Event) {
    on = (event.target as HTMLInputElement).checked;
  }
</script>
 
<Switch
  label={switchFixture.label}
  description={switchFixture.description}
  checked={on}
  {onChange}
/>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { Switch } from "@grassroot/ui-solid";
const switchFixture = {
  id: "switch",
  label: "Deploy on merge",
  description: "Ship prod when CI passes on main",
  checked: true,
} satisfies {
  id: string;
  label: string;
  description: string;
  checked: boolean;
};
 
export default function SwitchDemo() {
  const [on, setOn] = createSignal<boolean>(switchFixture.checked);
 
  return (
    <>
      <Switch
        label={switchFixture.label}
        description={switchFixture.description}
        checked={on()}
        onChange={(e) => setOn((e.target as HTMLInputElement).checked)}
      />
    </>
  );
}