ToggleGroup

import { ToggleGroup } from "@grassroot/ui-react";
 
const align = [
  { value: "left", label: "Left" },
  { value: "center", label: "Center" },
  { value: "right", label: "Right" },
];
 
const format = [
  { value: "bold", label: "B" },
  { value: "italic", label: "I" },
  { value: "underline", label: "U" },
];
 
 
const [single, setSingle] = React.useState("left");
const [multiple, setMultiple] = React.useState<string[]>(["bold"]);
 
<ToggleGroup type="single" options={align} value={single} onValueChange={setSingle} />
<ToggleGroup type="multiple" options={format} value={multiple} onValueChange={setMultiple} />

<script setup lang="ts">
import { ref } from "vue";
import { ToggleGroup } from "@grassroot/ui-vue";
 
const align = [
  { value: "left", label: "Left" },
  { value: "center", label: "Center" },
  { value: "right", label: "Right" },
];
const format = [
  { value: "bold", label: "B" },
  { value: "italic", label: "I" },
  { value: "underline", label: "U" },
];
 
const single = ref("left");
const multiple = ref(["bold"]);
</script>
 
<template>
  <ToggleGroup v-model="single" type="single" :options="align" />
  <ToggleGroup v-model="multiple" type="multiple" :options="format" />
</template>

import { Component, signal } from "@angular/core";
import { GrassrootToggleGroup } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootToggleGroup],
  template: `
    <grassroot-toggle-group
      type="single"
      [options]="align"
      [value]="single()"
      (valueChange)="single.set($event)"
    />
    <grassroot-toggle-group
      type="multiple"
      [options]="format"
      [value]="multiple()"
      (valueChange)="multiple.set($event)"
    />
  `,
})
export class ExampleComponent {
  readonly align = [
    { value: "left", label: "Left" },
    { value: "center", label: "Center" },
    { value: "right", label: "Right" },
  ];
  readonly format = [
    { value: "bold", label: "B" },
    { value: "italic", label: "I" },
    { value: "underline", label: "U" },
  ];
  readonly single = signal("left");
  readonly multiple = signal(["bold"]);
}

<script lang="ts">
  import { ToggleGroup } from "@grassroot/ui-svelte";
 
  const align = [
    { value: "left", label: "Left" },
    { value: "center", label: "Center" },
    { value: "right", label: "Right" },
  ];
  const format = [
    { value: "bold", label: "B" },
    { value: "italic", label: "I" },
    { value: "underline", label: "U" },
  ];
 
  let single = $state("left");
  let multiple = $state(["bold"]);
</script>
 
<ToggleGroup
  type="single"
  options={align}
  value={single}
  onValueChange={(next) => (single = next)}
/>
<ToggleGroup
  type="multiple"
  options={format}
  value={multiple}
  onValueChange={(next) => (multiple = next)}
/>

import { createSignal } from "solid-js";
import { ToggleGroup } from "@grassroot/ui-solid";
 
const align = [
  { value: "left", label: "Left" },
  { value: "center", label: "Center" },
  { value: "right", label: "Right" },
];
const format = [
  { value: "bold", label: "B" },
  { value: "italic", label: "I" },
  { value: "underline", label: "U" },
];
 
export function Example() {
  const [single, setSingle] = createSignal("left");
  const [multiple, setMultiple] = createSignal(["bold"]);
 
  return (
    <>
      <ToggleGroup type="single" options={align} value={single()} onValueChange={setSingle} />
      <ToggleGroup
        type="multiple"
        options={format}
        value={multiple()}
        onValueChange={setMultiple}
      />
    </>
  );
}