ToggleGroup

const toggleGroupFixture = {
  id: "toggle-group",
  single: {
    defaultValue: "left",
    options: [
      { value: "left", label: "Left" },
      { value: "center", label: "Center" },
      { value: "right", label: "Right", disabled: true },
    ],
  },
  multiple: {
    defaultValue: ["bold"],
    options: [
      { value: "bold", label: "Bold" },
      { value: "italic", label: "Italic" },
      { value: "underline", label: "Underline" },
    ],
  },
} as const;
 
import { ToggleGroup } from "@grassroot/ui-react";
 
export default function ToggleGroupDemo() {
  return (
    <div>
      <ToggleGroup
        options={[...toggleGroupFixture.single.options]}
        defaultValue={toggleGroupFixture.single.defaultValue}
      />
      <ToggleGroup
        type="multiple"
        options={[...toggleGroupFixture.multiple.options]}
        defaultValue={[...toggleGroupFixture.multiple.defaultValue]}
      />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
const toggleGroupFixture = {
  id: "toggle-group",
  single: {
    defaultValue: "left",
    options: [
      { value: "left", label: "Left" },
      { value: "center", label: "Center" },
      { value: "right", label: "Right", disabled: true },
    ],
  },
  multiple: {
    defaultValue: ["bold"],
    options: [
      { value: "bold", label: "Bold" },
      { value: "italic", label: "Italic" },
      { value: "underline", label: "Underline" },
    ],
  },
} as const;
 
import { ToggleGroup } from "@grassroot/ui-vue";
const single = ref(toggleGroupFixture.single.defaultValue);
const multiple = ref([...toggleGroupFixture.multiple.defaultValue]);
</script>
<template>
  <div>
    <ToggleGroup v-model="single" :options="[...toggleGroupFixture.single.options]" /><ToggleGroup
      v-model="multiple"
      type="multiple"
      :options="[...toggleGroupFixture.multiple.options]"
    />
  </div>
</template>

import { Component } from "@angular/core";
const toggleGroupFixture = {
  id: "toggle-group",
  single: {
    defaultValue: "left",
    options: [
      { value: "left", label: "Left" },
      { value: "center", label: "Center" },
      { value: "right", label: "Right", disabled: true },
    ],
  },
  multiple: {
    defaultValue: ["bold"],
    options: [
      { value: "bold", label: "Bold" },
      { value: "italic", label: "Italic" },
      { value: "underline", label: "Underline" },
    ],
  },
} as const;
 
import { GrassrootToggleGroup } from "@grassroot/ui-angular";
@Component({
  selector: "app-toggle-group-demo",
  standalone: true,
  imports: [GrassrootToggleGroup],
  template: `<div>
    <grassroot-toggle-group
      [options]="fixture.single.options"
      [defaultValue]="fixture.single.defaultValue"
    /><grassroot-toggle-group
      type="multiple"
      [options]="fixture.multiple.options"
      [defaultValue]="fixture.multiple.defaultValue"
    />
  </div>`,
})
export class ToggleGroupDemoComponent {
  protected readonly fixture = toggleGroupFixture;
}
export default ToggleGroupDemoComponent;

<script lang="ts">
  const toggleGroupFixture = {
    id: "toggle-group",
    single: {
      defaultValue: "left",
      options: [
        { value: "left", label: "Left" },
        { value: "center", label: "Center" },
        { value: "right", label: "Right", disabled: true },
      ],
    },
    multiple: {
      defaultValue: ["bold"],
      options: [
        { value: "bold", label: "Bold" },
        { value: "italic", label: "Italic" },
        { value: "underline", label: "Underline" },
      ],
    },
  } as const;
 
  import { ToggleGroup } from "@grassroot/ui-svelte";
</script>
 
<div>
  <ToggleGroup
    options={[...toggleGroupFixture.single.options]}
    defaultValue={toggleGroupFixture.single.defaultValue}
  /><ToggleGroup
    type="multiple"
    options={[...toggleGroupFixture.multiple.options]}
    defaultValue={[...toggleGroupFixture.multiple.defaultValue]}
  />
</div>

/** @jsxImportSource solid-js */
const toggleGroupFixture = {
  id: "toggle-group",
  single: {
    defaultValue: "left",
    options: [
      { value: "left", label: "Left" },
      { value: "center", label: "Center" },
      { value: "right", label: "Right", disabled: true },
    ],
  },
  multiple: {
    defaultValue: ["bold"],
    options: [
      { value: "bold", label: "Bold" },
      { value: "italic", label: "Italic" },
      { value: "underline", label: "Underline" },
    ],
  },
} as const;
 
import { ToggleGroup } from "@grassroot/ui-solid";
export default function ToggleGroupDemo() {
  return (
    <div>
      <ToggleGroup
        options={[...toggleGroupFixture.single.options]}
        defaultValue={toggleGroupFixture.single.defaultValue}
      />
      <ToggleGroup
        type="multiple"
        options={[...toggleGroupFixture.multiple.options]}
        defaultValue={[...toggleGroupFixture.multiple.defaultValue]}
      />
    </div>
  );
}