radio-group-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radio-group-example",
  "title": "Radio Group",
  "registryDependencies": [
    "field",
    "radio-group",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-mira/examples/radio-group-example.tsx",
      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/base-mira/ui/field\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/base-mira/ui/radio-group\"\n\nexport default function RadioGroupExample() {\n  return (\n    <ExampleWrapper>\n      <RadioGroupBasic />\n      <RadioGroupWithDescriptions />\n      <RadioGroupWithFieldSet />\n      <RadioGroupGrid />\n      <RadioGroupDisabled />\n      <RadioGroupInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction RadioGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <RadioGroup defaultValue=\"comfortable\">\n        <Field orientation=\"horizontal\">\n          <RadioGroupItem value=\"default\" id=\"r1\" />\n          <FieldLabel htmlFor=\"r1\" className=\"font-normal\">\n            Default\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <RadioGroupItem value=\"comfortable\" id=\"r2\" />\n          <FieldLabel htmlFor=\"r2\" className=\"font-normal\">\n            Comfortable\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <RadioGroupItem value=\"compact\" id=\"r3\" />\n          <FieldLabel htmlFor=\"r3\" className=\"font-normal\">\n            Compact\n          </FieldLabel>\n        </Field>\n      </RadioGroup>\n    </Example>\n  )\n}\n\nfunction RadioGroupWithDescriptions() {\n  return (\n    <Example title=\"With Descriptions\">\n      <RadioGroup defaultValue=\"plus\">\n        <FieldLabel htmlFor=\"plus-plan\">\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <div className=\"font-medium\">Plus</div>\n              <FieldDescription>\n                For individuals and small teams\n              </FieldDescription>\n            </FieldContent>\n            <RadioGroupItem value=\"plus\" id=\"plus-plan\" />\n          </Field>\n        </FieldLabel>\n        <FieldLabel htmlFor=\"pro-plan\">\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <div className=\"font-medium\">Pro</div>\n              <FieldDescription>For growing businesses</FieldDescription>\n            </FieldContent>\n            <RadioGroupItem value=\"pro\" id=\"pro-plan\" />\n          </Field>\n        </FieldLabel>\n        <FieldLabel htmlFor=\"enterprise-plan\">\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <div className=\"font-medium\">Enterprise</div>\n              <FieldDescription>\n                For large teams and enterprises\n              </FieldDescription>\n            </FieldContent>\n            <RadioGroupItem value=\"enterprise\" id=\"enterprise-plan\" />\n          </Field>\n        </FieldLabel>\n      </RadioGroup>\n    </Example>\n  )\n}\n\nfunction RadioGroupWithFieldSet() {\n  return (\n    <Example title=\"With FieldSet\">\n      <FieldSet>\n        <FieldLegend>Battery Level</FieldLegend>\n        <FieldDescription>\n          Choose your preferred battery level.\n        </FieldDescription>\n        <RadioGroup defaultValue=\"medium\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"high\" id=\"battery-high\" />\n            <FieldLabel htmlFor=\"battery-high\" className=\"font-normal\">\n              High\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n            <FieldLabel htmlFor=\"battery-medium\" className=\"font-normal\">\n              Medium\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"low\" id=\"battery-low\" />\n            <FieldLabel htmlFor=\"battery-low\" className=\"font-normal\">\n              Low\n            </FieldLabel>\n          </Field>\n        </RadioGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction RadioGroupGrid() {\n  return (\n    <Example title=\"Grid Layout\">\n      <RadioGroup defaultValue=\"medium\" className=\"grid grid-cols-2 gap-2\">\n        <FieldLabel htmlFor=\"size-small\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"small\" id=\"size-small\" />\n            <div className=\"font-medium\">Small</div>\n          </Field>\n        </FieldLabel>\n        <FieldLabel htmlFor=\"size-medium\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"medium\" id=\"size-medium\" />\n            <div className=\"font-medium\">Medium</div>\n          </Field>\n        </FieldLabel>\n        <FieldLabel htmlFor=\"size-large\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"large\" id=\"size-large\" />\n            <div className=\"font-medium\">Large</div>\n          </Field>\n        </FieldLabel>\n        <FieldLabel htmlFor=\"size-xlarge\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"xlarge\" id=\"size-xlarge\" />\n            <div className=\"font-medium\">X-Large</div>\n          </Field>\n        </FieldLabel>\n      </RadioGroup>\n    </Example>\n  )\n}\n\nfunction RadioGroupDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <RadioGroup defaultValue=\"option2\" disabled>\n        <Field orientation=\"horizontal\">\n          <RadioGroupItem value=\"option1\" id=\"disabled-1\" />\n          <FieldLabel htmlFor=\"disabled-1\" className=\"font-normal\">\n            Option 1\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <RadioGroupItem value=\"option2\" id=\"disabled-2\" />\n          <FieldLabel htmlFor=\"disabled-2\" className=\"font-normal\">\n            Option 2\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <RadioGroupItem value=\"option3\" id=\"disabled-3\" />\n          <FieldLabel htmlFor=\"disabled-3\" className=\"font-normal\">\n            Option 3\n          </FieldLabel>\n        </Field>\n      </RadioGroup>\n    </Example>\n  )\n}\n\nfunction RadioGroupInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <FieldSet>\n        <FieldLegend>Notification Preferences</FieldLegend>\n        <FieldDescription>\n          Choose how you want to receive notifications.\n        </FieldDescription>\n        <RadioGroup defaultValue=\"email\">\n          <Field orientation=\"horizontal\" data-invalid>\n            <RadioGroupItem value=\"email\" id=\"invalid-email\" aria-invalid />\n            <FieldLabel htmlFor=\"invalid-email\" className=\"font-normal\">\n              Email only\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\" data-invalid>\n            <RadioGroupItem value=\"sms\" id=\"invalid-sms\" aria-invalid />\n            <FieldLabel htmlFor=\"invalid-sms\" className=\"font-normal\">\n              SMS only\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\" data-invalid>\n            <RadioGroupItem value=\"both\" id=\"invalid-both\" aria-invalid />\n            <FieldLabel htmlFor=\"invalid-both\" className=\"font-normal\">\n              Both Email & SMS\n            </FieldLabel>\n          </Field>\n        </RadioGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}