RadioGroupWithDescriptions() — ui Function Reference

Architecture documentation for the RadioGroupWithDescriptions() function in radio-group-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ RadioGroupWithDescriptions() — ui Function Reference

Dependency Diagram

graph TD
  6e86bedd_b064_ad73_ff91_acc8fb9c28ef["RadioGroupWithDescriptions()"]
  d12829dd_5ced_9aa9_2bcb_2101c3088829["radio-group-example.tsx"]
  6e86bedd_b064_ad73_ff91_acc8fb9c28ef -->|defined in| d12829dd_5ced_9aa9_2bcb_2101c3088829
  style 6e86bedd_b064_ad73_ff91_acc8fb9c28ef fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/radio-group-example.tsx lines 58–96

function RadioGroupWithDescriptions() {
  return (
    <Example title="With Descriptions">
      <RadioGroup defaultValue="plus">
        <FieldLabel htmlFor="plus-plan">
          <Field orientation="horizontal">
            <FieldContent>
              <div className="font-medium">Plus</div>
              <FieldDescription>
                For individuals and small teams
              </FieldDescription>
            </FieldContent>
            <RadioGroupItem value="plus" id="plus-plan" />
          </Field>
        </FieldLabel>
        <FieldLabel htmlFor="pro-plan">
          <Field orientation="horizontal">
            <FieldContent>
              <div className="font-medium">Pro</div>
              <FieldDescription>For growing businesses</FieldDescription>
            </FieldContent>
            <RadioGroupItem value="pro" id="pro-plan" />
          </Field>
        </FieldLabel>
        <FieldLabel htmlFor="enterprise-plan">
          <Field orientation="horizontal">
            <FieldContent>
              <div className="font-medium">Enterprise</div>
              <FieldDescription>
                For large teams and enterprises
              </FieldDescription>
            </FieldContent>
            <RadioGroupItem value="enterprise" id="enterprise-plan" />
          </Field>
        </FieldLabel>
      </RadioGroup>
    </Example>
  )
}