チェックボックス・ラジオボタン（Checkbox / Radio）

'use client';
import { useState } from 'react';
import { MantineProvider, Checkbox, Radio, Stack } from '@mantine/core';
import '@mantine/core/styles.css';

const options = ['React', 'Vue', 'Svelte', 'Angular'];

export function MantineCheckboxRadioDemo() {
  const [checked, setChecked] = useState<string[]>(['React']);
  const [radio, setRadio] = useState('React');

  return (
    <MantineProvider>
      <Stack gap="lg">
        <div>
          <p className="text-sm font-medium mb-2">Checkbox（複数選択）</p>
          <Checkbox.Group value={checked} onChange={setChecked}>
            <Stack gap="xs">
              {options.map((opt) => (
                <Checkbox key={opt} value={opt} label={opt} />
              ))}
            </Stack>
          </Checkbox.Group>
        </div>
        <div>
          <p className="text-sm font-medium mb-2">Radio（単一選択）</p>
          <Radio.Group value={radio} onChange={setRadio}>
            <Stack gap="xs">
              {options.map((opt) => (
                <Radio key={opt} value={opt} label={opt} />
              ))}
            </Stack>
          </Radio.Group>
        </div>
      </Stack>
    </MantineProvider>
  );
}