{"name":"radio-group","title":"Radio Group","description":"A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.","installCommand":"bunx marko-ui add radio-group -y","usageTags":"<RadioGroup>","importSnippet":"import RadioGroup from \"@/components/ui/radio-group/radio-group.marko\";","usageSnippet":"<let/selected=(\"option-one\" as string | null)/>\n\n<RadioGroup items=[{ value: \"option-one\", label: \"Option One\" }, { value: \"option-two\", label: \"Option Two\" }] value:=selected/>","tags":["RadioGroup"],"parts":[{"name":"item","attributes":[{"name":"value","type":"string","required":true},{"name":"disabled","type":"boolean","required":false}],"repeatable":true}],"props":[{"name":"defaultValue","type":"string | null | undefined","required":false,"description":"The initial value of the checked radio when rendered.\nUse when you don't need to control the value of the radio group."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"disabled","type":"boolean | undefined","required":false,"description":"If `true`, the radio group will be disabled"},{"name":"form","type":"string | undefined","required":false,"description":"The associate form of the underlying input."},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the radio. Useful for composition."},{"name":"invalid","type":"boolean | undefined","required":false,"description":"If `true`, the radio group is marked as invalid."},{"name":"items","type":"RadioGroupItem[]","required":false},{"name":"name","type":"string | undefined","required":false,"description":"The name of the input fields in the radio\n(Useful for form submission)."},{"name":"orientation","type":"'horizontal' | 'vertical' | undefined","required":false,"description":"Orientation of the radio group"},{"name":"readOnly","type":"boolean | undefined","required":false,"description":"Whether the radio group is read-only"},{"name":"required","type":"boolean | undefined","required":false,"description":"If `true`, the radio group is marked as required."},{"name":"value","type":"string | null","required":false}],"events":[{"name":"onValueChange","arg":"ValueChangeDetails","description":"Function called once a radio is checked"},{"name":"valueChange","arg":"string"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"radio-group-demo","title":"Basic","source":"import RadioGroup from \"@marko-ui/shadcn/ui/radio-group/radio-group.marko\";\n\nstatic const ITEMS = [\n  { value: \"default\", label: \"Default\" },\n  { value: \"comfortable\", label: \"Comfortable\" },\n  { value: \"compact\", label: \"Compact\" },\n];\n\n<RadioGroup items=ITEMS defaultValue=\"comfortable\"/>","description":"Pass an `items: { value, label, disabled? }[]` array and the component renders every item internally — or compose options in markup with `<@item>` attribute tags (see the Compound example)."},{"id":"radio-group-fieldset","title":"Fieldset","source":"import RadioGroup from \"@marko-ui/shadcn/ui/radio-group/radio-group.marko\";\nimport FieldSet from \"@marko-ui/shadcn/ui/field/field-set.marko\";\nimport FieldLegend from \"@marko-ui/shadcn/ui/field/field-legend.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\n\nstatic const PLANS = [\n  { value: \"monthly\", label: \"Monthly ($9.99/month)\" },\n  { value: \"yearly\", label: \"Yearly ($99.99/year)\" },\n  { value: \"lifetime\", label: \"Lifetime ($299.99)\" },\n];\n\n<FieldSet class=\"w-full max-w-xs\">\n  <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n  <FieldDescription>Yearly and lifetime plans offer significant savings.</FieldDescription>\n  <RadioGroup items=PLANS value=\"monthly\" class=\"mt-3\"/>\n</FieldSet>","description":"Wrap `RadioGroup` in `FieldSet`/`FieldLegend`/`FieldDescription` to group items with a label and description. Upstream additionally wraps each item in its own `<Field orientation=\"horizontal\">`; our items already render an equivalent label+control pairing internally, so only the outer fieldset composition is needed."},{"id":"radio-group-disabled","title":"Disabled item","source":"import RadioGroup from \"@marko-ui/shadcn/ui/radio-group/radio-group.marko\";\n\nstatic const ITEMS = [\n  { value: \"card\", label: \"Card\" },\n  { value: \"paypal\", label: \"PayPal\" },\n  { value: \"apple-pay\", label: \"Apple Pay\", disabled: true },\n];\n\n<RadioGroup items=ITEMS value=\"card\"/>","description":"Set `disabled` on a single item to remove it from the tab order and ignore pointer input."},{"id":"radio-group-disabled-group","title":"Disabled","source":"import RadioGroup from \"@marko-ui/shadcn/ui/radio-group/radio-group.marko\";\n\nstatic const ITEMS = [\n  { value: \"default\", label: \"Default\" },\n  { value: \"comfortable\", label: \"Comfortable\" },\n  { value: \"compact\", label: \"Compact\" },\n];\n\n<RadioGroup items=ITEMS value=\"default\" disabled/>","description":"Pass `disabled` on `RadioGroup` itself to disable every item in the group."},{"id":"radio-group-controlled","title":"Controlled","source":"import RadioGroup from \"@marko-ui/shadcn/ui/radio-group/radio-group.marko\";\n\nstatic const ITEMS = [\n  { value: \"default\", label: \"Default\" },\n  { value: \"comfortable\", label: \"Comfortable\" },\n  { value: \"compact\", label: \"Compact\" },\n];\n\n<let/value=(\"comfortable\" as string | null)/>\n\n<div class=\"flex flex-col gap-4\">\n  <RadioGroup\n    items=ITEMS\n    value=value\n    valueChange=(next) => { value = next; }\n  />\n  <span class=\"text-sm text-muted-foreground\">value: ${value ?? \"none\"}</span>\n</div>","description":"Zag machines are controlled: a `value` prop without a change handler never moves. Pair it with `valueChange`, or use Marko's bind shorthand `value:=state`.","essential":true},{"id":"radio-group-compound","title":"Compound (attr tags)","source":"import RadioGroup from \"@marko-ui/shadcn/ui/radio-group/radio-group.marko\";\n\n<RadioGroup defaultValue=\"comfortable\">\n  <@item value=\"default\">Default</@item>\n  <@item value=\"comfortable\">Comfortable</@item>\n  <@item value=\"compact\" disabled>Compact</@item>\n</RadioGroup>","description":"Use `<@item>` attribute tags instead of `items=` to compose each option directly in markup.","essential":true},{"id":"radio-group-rtl","title":"RTL","source":"import RadioGroup from \"@marko-ui/shadcn/ui/radio-group/radio-group.marko\";\n\nstatic const ITEMS = [\n  { value: \"default\", label: \"افتراضي\" },\n  { value: \"comfortable\", label: \"مريح\" },\n  { value: \"compact\", label: \"مضغوط\" },\n];\n\n<RadioGroup items=ITEMS value=\"comfortable\" dir=\"rtl\" class=\"w-fit\"/>","description":"`dir` isn't a @zag-js/radio-group machine prop, so it passes through as a native attribute on the root — pair it with logical-property CSS for full mirroring."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"div","itemTypes":[{"prop":"items","typeName":"RadioGroupItem","fields":[{"name":"value","type":"string","required":true},{"name":"label","type":"string","required":true},{"name":"disabled","type":"boolean","required":false}]}],"composition":"RadioGroup\n├── item (from `items=`, or an `<@item>` attribute tag)\n└── item"}