RadioGroupWithDescriptions() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ RadioGroupWithDescriptions() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/base/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>
  )
}