Checkbox

import { Checkbox } from "@grassroot/ui-react";
 
const [agree, setAgree] = React.useState(true);
 
<Checkbox label="New build" checked={agree} onChange={(e) => setAgree(e.target.checked)} />
<Checkbox label="Rescue job" defaultChecked />
<Checkbox label="Unavailable option" disabled />

<script setup lang="ts">
import { ref } from "vue";
import { Checkbox } from "@grassroot/ui-vue";
 
const agree = ref(true);
</script>
 
<template>
  <Checkbox
    label="New build"
    :checked="agree"
    @change="agree = e.target.checked"
  />
  <Checkbox label="Rescue job" default-checked />
  <Checkbox label="Unavailable option" disabled />
</template>

import { Component, signal } from "@angular/core";
import { GrassrootCheckbox } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootCheckbox],
  template: `
    <grassroot-checkbox
      label="New build"
      [checked]="agree()"
      (change)="agree.set(e.target.checked)"
    />
    <grassroot-checkbox label="Rescue job" [defaultChecked]="true" />
    <grassroot-checkbox label="Unavailable option" [disabled]="true" />
  `,
})
export class ExampleComponent {
  readonly agree = signal(true);
}

<script lang="ts">
  import { Checkbox } from "@grassroot/ui-svelte";
 
  let agree = $state(true);
</script>
 
<Checkbox
  label="New build"
  checked={agree}
  onChange={(e) => agree = e.target.checked}
/>
<Checkbox label="Rescue job" defaultChecked />
<Checkbox label="Unavailable option" disabled />

import { createSignal } from "solid-js";
import { Checkbox } from "@grassroot/ui-solid";
 
export function Example() {
  const [agree, setAgree] = createSignal(true);
 
  return (
    <>
      <Checkbox
        label="New build"
        checked={agree()}
        onChange={(e) => setAgree(e.target.checked)}
      />
      <Checkbox label="Rescue job" defaultChecked />
      <Checkbox label="Unavailable option" disabled />
    </>
  );
}