Files
medusa-store/www/apps/ui/specs/examples/radio-group-controlled.tsx
Shahed Nasser d1a1135328 docs: migrate UI docs (#13245)
* docs: create a new UI docs project (#13233)

* docs: create a new UI docs project

* fix installation errors

* docs: migrate UI docs content to new project (#13241)

* Fix content

* added examples for some components

* finish adding examples

* lint fix

* fix build errors

* delete empty files

* path fixes + refactor

* fix build error
2025-08-20 11:42:25 +03:00

32 lines
1.1 KiB
TypeScript

import { Label, RadioGroup } from "@medusajs/ui"
import * as React from "react"
export default function RadioGroupControlled() {
const [value, setValue] = React.useState("1")
return (
<div className="flex flex-col gap-2 items-center">
<RadioGroup value={value} onValueChange={setValue}>
<div className="flex items-center gap-x-3">
<RadioGroup.Item value="1" id="radio_1_controlled" />
<Label htmlFor="radio_1_controlled" weight="plus">
Radio 1
</Label>
</div>
<div className="flex items-center gap-x-3">
<RadioGroup.Item value="2" id="radio_2_controlled" />
<Label htmlFor="radio_2_controlled" weight="plus">
Radio 2
</Label>
</div>
<div className="flex items-center gap-x-3">
<RadioGroup.Item value="3" id="radio_3_controlled" />
<Label htmlFor="radio_3_controlled" weight="plus">
Radio 3
</Label>
</div>
</RadioGroup>
<div className="txt-small text-ui-fg-muted">Selected value: {value}</div>
</div>
)
}