@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
49 lines • 1.57 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/examples/radio-group-aria-labelledby.tsx";
import { useId, useState } from 'preact/hooks';
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 labelId = useId();
return _jsxDEV("div", {
className: "w-full flex flex-col gap-2",
children: [_jsxDEV("p", {
id: labelId,
children: "Items labeled with aria-labelledby"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 11,
columnNumber: 7
}, this), _jsxDEV(RadioGroup, {
"aria-labelledby": labelId,
selected: value,
onChange: setValue,
children: [_jsxDEV(RadioGroup.Radio, {
value: "one",
subtitle: "This is the first item",
children: "First"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 9
}, this), _jsxDEV(RadioGroup.Radio, {
value: "two",
subtitle: "This is the second item",
children: "Second"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 20,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 12,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 10,
columnNumber: 5
}, this);
}
//# sourceMappingURL=radio-group-aria-labelledby.js.map