Radio

import { Radio } from "@grassroot/ui-react";
import * as React from "react";
const radioFixture = {
  id: "radio",
  name: "engagement",
  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;
  value: string;
  options: Array<{ id: string; label: string; value: string }>;
};
 
export default function RadioDemo() {
  const [value, setValue] = React.useState(radioFixture.value);
  return (
    <div className="flex flex-col gap-3.5">
      {radioFixture.options.map((option) => (
        <Radio
          key={option.id}
          name={`${radioFixture.name}-react`}
          value={option.value}
          checked={value === option.value}
          label={option.label}
          onChange={(event) => setValue(event.target.value)}
        />
      ))}
    </div>
  );
}

<script setup lang="ts">
import { Radio } from "@grassroot/ui-vue";
import { ref } from "vue";
const radioFixture = {
  id: "radio",
  name: "engagement",
  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;
  value: string;
  options: Array<{ id: string; label: string; value: string }>;
};
 
const value = ref(radioFixture.value);
function onChange(event: Event) {
  value.value = (event.target as HTMLInputElement).value;
}
</script>
 
<template>
  <div class="flex flex-col gap-3.5">
    <Radio
      v-for="option in radioFixture.options"
      :key="option.id"
      :checked="value === option.value"
      :name="`${radioFixture.name}-vue`"
      :value="option.value"
      @change="onChange"
    >
      <template #label>{{ option.label }}</template>
    </Radio>
  </div>
</template>

import { Component, signal } from "@angular/core";
const radioFixture = {
  id: "radio",
  name: "engagement",
  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;
  value: string;
  options: Array<{ id: string; label: string; value: string }>;
};
 
import { GrassrootRadio } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-radio-demo",
  standalone: true,
  imports: [GrassrootRadio],
  host: { style: "display: contents" },
  template: `
    <div class="flex flex-col gap-3.5">
      @for (option of fixture.options; track option.id) {
        <grassroot-radio
          [name]="name"
          [value]="option.value"
          [checked]="value() === option.value"
          [label]="option.label"
          (change)="onChange($event)"
        />
      }
    </div>
  `,
})
export class RadioDemoComponent {
  protected readonly fixture = radioFixture;
  protected readonly name = `${radioFixture.name}-angular`;
  protected readonly value = signal(radioFixture.value);
 
  protected onChange(event: Event): void {
    this.value.set((event.target as HTMLInputElement).value);
  }
}
 
export default RadioDemoComponent;

<script lang="ts">
  import { Radio } from "@grassroot/ui-svelte";
  const radioFixture = {
    id: "radio",
    name: "engagement",
    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;
    value: string;
    options: Array<{ id: string; label: string; value: string }>;
  };
 
  let value = $state(radioFixture.value);
  function onChange(event: Event) {
    value = (event.target as HTMLInputElement).value;
  }
</script>
 
<div class="flex flex-col gap-3.5">
  {#each radioFixture.options as option (option.id)}
    <Radio
      checked={value === option.value}
      name={`${radioFixture.name}-svelte`}
      value={option.value}
      label={option.label}
      {onChange}
    />
  {/each}
</div>

/** @jsxImportSource solid-js */
import { Radio } from "@grassroot/ui-solid";
import { createSignal } from "solid-js";
const radioFixture = {
  id: "radio",
  name: "engagement",
  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;
  value: string;
  options: Array<{ id: string; label: string; value: string }>;
};
 
export default function RadioDemo() {
  const [value, setValue] = createSignal(radioFixture.value);
  return (
    <div class="flex flex-col gap-3.5">
      {radioFixture.options.map((option) => (
        <Radio
          name={`${radioFixture.name}-solid`}
          value={option.value}
          checked={value() === option.value}
          label={option.label}
          onChange={(event) => setValue((event.target as HTMLInputElement).value)}
        />
      ))}
    </div>
  );
}