Radio Group

<script type="module" src="@arclux/arc-ui"></script>

<!-- Vertical (default) -->
<arc-radio-group name="plan" value="starter">
  <arc-radio value="starter">Starter — Free for individuals</arc-radio>
  <arc-radio value="pro">Pro — $12/mo for teams</arc-radio>
  <arc-radio value="enterprise">Enterprise — Custom pricing</arc-radio>
</arc-radio-group>

<!-- Horizontal layout -->
<arc-radio-group name="size" value="md" orientation="horizontal">
  <arc-radio value="sm">Small</arc-radio>
  <arc-radio value="md">Medium</arc-radio>
  <arc-radio value="lg">Large</arc-radio>
  <arc-radio value="xl">X-Large</arc-radio>
</arc-radio-group>

<script>
  document.querySelector('arc-radio-group')
    .addEventListener('arc-change', (e) => {
      console.log('Selected:', e.detail.value);
    });
</script>

import { RadioGroup, Radio } from '@arclux/arc-ui-react';
import { useState } from 'react';

function PricingPlan() {
  const [plan, setPlan] = useState('starter');

  return (
    <RadioGroup
      name="plan"
      value={plan}
      onArcChange={(e) => setPlan(e.detail.value)}
    >
      <Radio value="starter">Starter — Free for individuals</Radio>
      <Radio value="pro">Pro — $12/mo for teams</Radio>
      <Radio value="enterprise">Enterprise — Custom pricing</Radio>
    </RadioGroup>
  );
}

function SizeSelector() {
  return (
    <RadioGroup name="size" value="md" orientation="horizontal">
      <Radio value="sm">Small</Radio>
      <Radio value="md">Medium</Radio>
      <Radio value="lg">Large</Radio>
      <Radio value="xl">X-Large</Radio>
    </RadioGroup>
  );
}

<script setup>
import { RadioGroup, Radio } from '@arclux/arc-ui-vue';
import { ref } from 'vue';

const plan = ref('starter');
</script>

<template>
  <RadioGroup name="plan" :value="plan" @arc-change="plan = $event.detail.value">
    <Radio value="starter">Starter — Free for individuals</Radio>
    <Radio value="pro">Pro — $12/mo for teams</Radio>
    <Radio value="enterprise">Enterprise — Custom pricing</Radio>
  </RadioGroup>
</template>

<script>
  import { RadioGroup, Radio } from '@arclux/arc-ui-svelte';

  let theme = 'dark';
</script>

<RadioGroup name="theme" value={theme} orientation="horizontal"
  on:arc-change={(e) => theme = e.detail.value}>
  <Radio value="light">Light</Radio>
  <Radio value="dark">Dark</Radio>
  <Radio value="auto">System</Radio>
</RadioGroup>

import { Component } from '@angular/core';
import { RadioGroup, Radio } from '@arclux/arc-ui-angular';

@Component({
  imports: [RadioGroup, Radio],
  template: `
    <arc-radio-group name="plan" [value]="plan" (arc-change)="plan = $event.detail.value">
      <arc-radio value="starter">Starter — Free for individuals</arc-radio>
      <arc-radio value="pro">Pro — $12/mo for teams</arc-radio>
      <arc-radio value="enterprise">Enterprise — Custom pricing</arc-radio>
    </arc-radio-group>
  `,
})
export class PricingComponent {
  plan = 'starter';
}

import { RadioGroup, Radio } from '@arclux/arc-ui-solid';
import { createSignal } from 'solid-js';

function ShippingMethod() {
  const [method, setMethod] = createSignal('standard');

  return (
    <RadioGroup name="shipping" value={method()}
      onArcChange={(e) => setMethod(e.detail.value)}>
      <Radio value="standard">Standard — 5-7 business days</Radio>
      <Radio value="express">Express — 2-3 business days</Radio>
      <Radio value="overnight">Overnight — Next business day</Radio>
    </RadioGroup>
  );
}

import { RadioGroup, Radio } from '@arclux/arc-ui-preact';
import { useState } from 'preact/hooks';

function NotificationPreference() {
  const [pref, setPref] = useState('email');

  return (
    <RadioGroup name="notify" value={pref}
      onArcChange={(e) => setPref(e.detail.value)}>
      <Radio value="email">Email notifications</Radio>
      <Radio value="sms">SMS notifications</Radio>
      <Radio value="push">Push notifications</Radio>
      <Radio value="none">No notifications</Radio>
    </RadioGroup>
  );
}

<!-- arc-radio-group is interactive — requires JS -->
<arc-radio-group></arc-radio-group>

<!-- arc-radio-group is interactive — requires JS -->
<arc-radio-group></arc-radio-group>