Switch

import { Switch } from "@grassroot/ui-react";
 
const [on, setOn] = React.useState(true);
 
<Switch
  label="Deploy on merge"
  description="Ship prod when CI passes on main"
  checked={on}
  onChange={(e) => setOn(e.target.checked)}
/>

<script setup lang="ts">
import { ref } from "vue";
import { Switch } from "@grassroot/ui-vue";
 
const on = ref(true);
</script>
 
<template>
  <Switch
    label="Deploy on merge"
    description="Ship prod when CI passes on main"
    :checked="on"
    @change="on = e.target.checked"
  />
</template>

import { Component, signal } from "@angular/core";
import { GrassrootSwitch } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootSwitch],
  template: `
    <grassroot-switch
      label="Deploy on merge"
      description="Ship prod when CI passes on main"
      [checked]="on()"
      (change)="on.set(e.target.checked)"
    />
  `,
})
export class ExampleComponent {
  readonly on = signal(true);
}

<script lang="ts">
  import { Switch } from "@grassroot/ui-svelte";
 
  let on = $state(true);
</script>
 
<Switch
  label="Deploy on merge"
  description="Ship prod when CI passes on main"
  checked={on}
  onChange={(e) => on = e.target.checked}
/>

import { createSignal } from "solid-js";
import { Switch } from "@grassroot/ui-solid";
 
export function Example() {
  const [on, setOn] = createSignal(true);
 
  return (
    <>
      <Switch
        label="Deploy on merge"
        description="Ship prod when CI passes on main"
        checked={on()}
        onChange={(e) => setOn(e.target.checked)}
      />
    </>
  );
}