RadioGroup

import { Radio, RadioGroup } from "@grassroot/ui-react";
const radioGroupFixture = {
  id: "radio-group",
  name: "engagement",
  label: "Engagement",
  description: "How should we work together?",
  value: "embedded-team",
  options: [
    { id: "embedded-team", label: "Embedded team", value: "embedded-team" },
    { id: "fixed-scope-project", label: "Fixed-scope project", value: "fixed-scope-project" },
    { id: "advisory-fractional", label: "Advisory / fractional", value: "advisory-fractional" },
  ],
} satisfies {
  id: string;
  name: string;
  label: string;
  description: string;
  value: string;
  options: Array<{ id: string; label: string; value: string }>;
};
 
export default function RadioGroupDemo() {
  return (
    <RadioGroup
      name={`${radioGroupFixture.name}-react`}
      defaultValue={radioGroupFixture.value}
      label={radioGroupFixture.label}
      description={radioGroupFixture.description}
    >
      {radioGroupFixture.options.map((option) => (
        <Radio key={option.id} value={option.value} label={option.label} />
      ))}
    </RadioGroup>
  );
}

<script setup lang="ts">
import { Radio, RadioGroup } from "@grassroot/ui-vue";
const radioGroupFixture = {
  id: "radio-group",
  name: "engagement",
  label: "Engagement",
  description: "How should we work together?",
  value: "embedded-team",
  options: [
    { id: "embedded-team", label: "Embedded team", value: "embedded-team" },
    { id: "fixed-scope-project", label: "Fixed-scope project", value: "fixed-scope-project" },
    { id: "advisory-fractional", label: "Advisory / fractional", value: "advisory-fractional" },
  ],
} satisfies {
  id: string;
  name: string;
  label: string;
  description: string;
  value: string;
  options: Array<{ id: string; label: string; value: string }>;
};
 
</script>
 
<template>
  <RadioGroup
    :name="`${radioGroupFixture.name}-vue`"
    :default-value="radioGroupFixture.value"
    :label="radioGroupFixture.label"
    :description="radioGroupFixture.description"
    @value-change="() => {}"
  >
    <Radio
      v-for="option in radioGroupFixture.options"
      :key="option.id"
      :value="option.value"
    >
      <template #label>{{ option.label }}</template>
    </Radio>
  </RadioGroup>
</template>

import { Component } from "@angular/core";
const radioGroupFixture = {
  id: "radio-group",
  name: "engagement",
  label: "Engagement",
  description: "How should we work together?",
  value: "embedded-team",
  options: [
    { id: "embedded-team", label: "Embedded team", value: "embedded-team" },
    { id: "fixed-scope-project", label: "Fixed-scope project", value: "fixed-scope-project" },
    { id: "advisory-fractional", label: "Advisory / fractional", value: "advisory-fractional" },
  ],
} satisfies {
  id: string;
  name: string;
  label: string;
  description: string;
  value: string;
  options: Array<{ id: string; label: string; value: string }>;
};
 
import { GrassrootRadio, GrassrootRadioGroup } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-radio-group-demo",
  standalone: true,
  imports: [GrassrootRadioGroup, GrassrootRadio],
  host: { style: "display: contents" },
  template: `
    <grassroot-radio-group
      [name]="name"
      [defaultValue]="fixture.value"
      [label]="fixture.label"
      [description]="fixture.description"
    >
      @for (option of fixture.options; track option.id) {
        <grassroot-radio [value]="option.value" [label]="option.label" />
      }
    </grassroot-radio-group>
  `,
})
export class RadioGroupDemoComponent {
  protected readonly fixture = radioGroupFixture;
  protected readonly name = `${radioGroupFixture.name}-angular`;
}
 
export default RadioGroupDemoComponent;

<script lang="ts">
  import { Radio, RadioGroup } from "@grassroot/ui-svelte";
  const radioGroupFixture = {
    id: "radio-group",
    name: "engagement",
    label: "Engagement",
    description: "How should we work together?",
    value: "embedded-team",
    options: [
      { id: "embedded-team", label: "Embedded team", value: "embedded-team" },
      { id: "fixed-scope-project", label: "Fixed-scope project", value: "fixed-scope-project" },
      { id: "advisory-fractional", label: "Advisory / fractional", value: "advisory-fractional" },
    ],
  } satisfies {
    id: string;
    name: string;
    label: string;
    description: string;
    value: string;
    options: Array<{ id: string; label: string; value: string }>;
  };
 
  </script>
 
<RadioGroup
  name={`${radioGroupFixture.name}-svelte`}
  defaultValue={radioGroupFixture.value}
  label={radioGroupFixture.label}
  description={radioGroupFixture.description}
>
  {#each radioGroupFixture.options as option (option.id)}
    <Radio value={option.value} label={option.label} />
  {/each}
</RadioGroup>

/** @jsxImportSource solid-js */
import { Radio, RadioGroup } from "@grassroot/ui-solid";
const radioGroupFixture = {
  id: "radio-group",
  name: "engagement",
  label: "Engagement",
  description: "How should we work together?",
  value: "embedded-team",
  options: [
    { id: "embedded-team", label: "Embedded team", value: "embedded-team" },
    { id: "fixed-scope-project", label: "Fixed-scope project", value: "fixed-scope-project" },
    { id: "advisory-fractional", label: "Advisory / fractional", value: "advisory-fractional" },
  ],
} satisfies {
  id: string;
  name: string;
  label: string;
  description: string;
  value: string;
  options: Array<{ id: string; label: string; value: string }>;
};
 
export default function RadioGroupDemo() {
  return (
    <RadioGroup
      name={`${radioGroupFixture.name}-solid`}
      defaultValue={radioGroupFixture.value}
      label={radioGroupFixture.label}
      description={radioGroupFixture.description}
    >
      {radioGroupFixture.options.map((option) => (
        <Radio value={option.value} label={option.label} />
      ))}
    </RadioGroup>
  );
}