RadioGroupDescription() — ui Function Reference

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

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ RadioGroupDescription() — ui Function Reference

Dependency Diagram

graph TD
  0ecd2d8b_98c6_44fa_68ab_391ebd3a5366["RadioGroupDescription()"]
  0d7aea60_e20e_dfb5_a2fa_10c4bc8cafbb["radio-group-description.tsx"]
  0ecd2d8b_98c6_44fa_68ab_391ebd3a5366 -->|defined in| 0d7aea60_e20e_dfb5_a2fa_10c4bc8cafbb
  style 0ecd2d8b_98c6_44fa_68ab_391ebd3a5366 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/radio-group-description.tsx lines 9–39

export function RadioGroupDescription() {
  return (
    <RadioGroup defaultValue="comfortable" className="w-fit">
      <Field orientation="horizontal">
        <RadioGroupItem value="default" id="desc-r1" />
        <FieldContent>
          <FieldLabel htmlFor="desc-r1">Default</FieldLabel>
          <FieldDescription>
            Standard spacing for most use cases.
          </FieldDescription>
        </FieldContent>
      </Field>
      <Field orientation="horizontal">
        <RadioGroupItem value="comfortable" id="desc-r2" />
        <FieldContent>
          <FieldLabel htmlFor="desc-r2">Comfortable</FieldLabel>
          <FieldDescription>More space between elements.</FieldDescription>
        </FieldContent>
      </Field>
      <Field orientation="horizontal">
        <RadioGroupItem value="compact" id="desc-r3" />
        <FieldContent>
          <FieldLabel htmlFor="desc-r3">Compact</FieldLabel>
          <FieldDescription>
            Minimal spacing for dense layouts.
          </FieldDescription>
        </FieldContent>
      </Field>
    </RadioGroup>
  )
}