Radio

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-radio> is the SAME shared custom element React and Vue consume.
     Radios sharing a `name` are mutually exclusive; it emits a composed `change` event. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css">
<script type="module">
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-radio.js';   // registers <aha-radio>
</script>

<!-- Wrap the set in role="radiogroup" so assistive tech announces one group.
     Arrow keys move + select within it; Tab moves in and out as a single stop. -->
<div role="radiogroup" aria-label="Activity mode" style="display:flex;flex-direction:column;gap:10px">
  <aha-radio name="mode" value="poll" checked>Poll</aha-radio>
  <aha-radio name="mode" value="quiz">Quiz</aha-radio>
  <aha-radio name="mode" value="wordcloud">Word cloud</aha-radio>
</div>

<!-- variant="button" → a segmented control of connected pills (size="small" for a compact row). -->
<div role="radiogroup" aria-label="View" style="display:flex">
  <aha-radio name="view" value="grid" variant="button" checked>Grid</aha-radio>
  <aha-radio name="view" value="list" variant="button">List</aha-radio>
  <aha-radio name="view" value="board" variant="button">Board</aha-radio>
</div>

<!-- variant="card" → the whole bordered card is the target; `description` adds a secondary line.
     The selected card gets a brand border + a subtle brand-tint fill. -->
<div role="radiogroup" aria-label="Plan" style="display:flex;flex-direction:column;gap:10px;max-width:360px">
  <aha-radio name="plan" value="pro" variant="card" checked
    description="Best for teams — unlimited slides and live results.">Pro</aha-radio>
  <aha-radio name="plan" value="essential" variant="card"
    description="For solo creators getting started.">Essential</aha-radio>
</div>

<script>
  // Plain DOM — no framework. Read e.detail.value off the composed CustomEvent.
  document.querySelectorAll('aha-radio[name="mode"]').forEach((r) => {
    r.addEventListener('change', (e) => console.log('mode:', e.detail.value));
  });
</script>

import '@ahaslides-product/design/aha-radio';   // registers <aha-radio>
import { useRef, useEffect } from 'react';

// React 18 needs a thin wrapper; React 19 can use <aha-radio> directly.
function AhaRadio({ checked, value, name, disabled, variant, size, description, onChange, children }) {
  const ref = useRef();
  useEffect(() => {
    const el = ref.current;
    el.checked = !!checked;
    el.disabled = !!disabled;
    const h = (e) => onChange?.(e.detail.value);   // composed CustomEvent
    el.addEventListener('change', h);
    return () => el.removeEventListener('change', h);
  });
  return <aha-radio ref={ref} name={name} value={value} variant={variant} size={size} description={description}>{children}</aha-radio>;
}

// usage — one `name` makes the set mutually exclusive; wrap in role="radiogroup"
<div role="radiogroup" aria-label="Activity mode">
  <AhaRadio name="mode" value="poll" checked={mode === 'poll'} onChange={setMode}>Poll</AhaRadio>
  <AhaRadio name="mode" value="quiz" checked={mode === 'quiz'} onChange={setMode}>Quiz</AhaRadio>
</div>

// segmented button group — variant="button" (add size="small" for a compact row)
<div role="radiogroup" aria-label="View" style={{ display: 'flex' }}>
  <AhaRadio name="view" value="grid" variant="button" checked={view === 'grid'} onChange={setView}>Grid</AhaRadio>
  <AhaRadio name="view" value="list" variant="button" checked={view === 'list'} onChange={setView}>List</AhaRadio>
</div>

// card group — variant="card"; the whole tile is the target, `description` adds a secondary line
<div role="radiogroup" aria-label="Plan" style={{ display: 'flex', flexDirection: 'column', gap: 10, maxWidth: 360 }}>
  <AhaRadio name="plan" value="pro" variant="card" checked={plan === 'pro'} onChange={setPlan}
    description="Best for teams — unlimited slides and live results.">Pro</AhaRadio>
  <AhaRadio name="plan" value="essential" variant="card" checked={plan === 'essential'} onChange={setPlan}
    description="For solo creators getting started.">Essential</AhaRadio>
</div>

// main.ts — register the element + mark aha-* as custom elements
import '@ahaslides-product/design/aha-radio';
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');

// Component.vue
<script setup>
import { ref } from 'vue';
const mode = ref('poll');
const view = ref('grid');
const plan = ref('pro');
</script>

<template>
  <div role="radiogroup" aria-label="Activity mode">
    <aha-radio
      name="mode" value="poll"
      :checked.prop="mode === 'poll'"
      @change="mode = $event.detail.value"
    >Poll</aha-radio>
    <aha-radio
      name="mode" value="quiz"
      :checked.prop="mode === 'quiz'"
      @change="mode = $event.detail.value"
    >Quiz</aha-radio>
  </div>

  <!-- segmented button group — variant="button" (add size="small" for a compact row) -->
  <div role="radiogroup" aria-label="View" style="display:flex">
    <aha-radio name="view" value="grid" variant="button" :checked.prop="view === 'grid'" @change="view = $event.detail.value">Grid</aha-radio>
    <aha-radio name="view" value="list" variant="button" :checked.prop="view === 'list'" @change="view = $event.detail.value">List</aha-radio>
  </div>

  <!-- card group — variant="card"; the whole tile is the target, description adds a secondary line -->
  <div role="radiogroup" aria-label="Plan" style="display:flex;flex-direction:column;gap:10px;max-width:360px">
    <aha-radio name="plan" value="pro" variant="card" description="Best for teams — unlimited slides and live results."
      :checked.prop="plan === 'pro'" @change="plan = $event.detail.value">Pro</aha-radio>
    <aha-radio name="plan" value="essential" variant="card" description="For solo creators getting started."
      :checked.prop="plan === 'essential'" @change="plan = $event.detail.value">Essential</aha-radio>
  </div>
</template>