@hypothesis/frontend-shared/lib/pattern-library/examples/radio-group-in-form.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/examples/radio-group-in-form.tsx";
import { useState } from 'preact/hooks';
import { Button } from '../../components/input';
import RadioGroup from '../../components/input/RadioGroup';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function App() {
  const [value, setValue] = useState('one');
  const [submitResult, setSubmitResult] = useState();
  const handleSubmit = e => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const formDataObj = {};
    formData.forEach((value, key) => {
      formDataObj[key] = value;
    });
    setSubmitResult(formDataObj);
  };
  return _jsxDEV("form", {
    className: "w-full space-y-3",
    onSubmit: handleSubmit,
    children: [_jsxDEV(RadioGroup, {
      name: "item",
      "aria-label": "Items",
      selected: value,
      onChange: setValue,
      children: [_jsxDEV(RadioGroup.Radio, {
        value: "one",
        subtitle: "This is the first item",
        children: "First"
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 28,
        columnNumber: 9
      }, this), _jsxDEV(RadioGroup.Radio, {
        value: "two",
        subtitle: "This is the second item",
        children: "Second"
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 31,
        columnNumber: 9
      }, this), _jsxDEV(RadioGroup.Radio, {
        value: "three",
        subtitle: "This is the third item",
        children: "Third"
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 34,
        columnNumber: 9
      }, this)]
    }, void 0, true, {
      fileName: _jsxFileName,
      lineNumber: 22,
      columnNumber: 7
    }, this), _jsxDEV(Button, {
      type: "submit",
      children: "Submit"
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 38,
      columnNumber: 7
    }, this), submitResult && _jsxDEV("pre", {
      children: JSON.stringify(submitResult, null, 2)
    }, void 0, false, {
      fileName: _jsxFileName,
      lineNumber: 39,
      columnNumber: 24
    }, this)]
  }, void 0, true, {
    fileName: _jsxFileName,
    lineNumber: 21,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=radio-group-in-form.js.map