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
  a4c9b0ab_a403_0cdc_b209_a4be733ce62e["RadioGroupDescription()"]
  073f9a7d_efc4_2721_61b2_7c82731092f3["radio-group-description.tsx"]
  a4c9b0ab_a403_0cdc_b209_a4be733ce62e -->|defined in| 073f9a7d_efc4_2721_61b2_7c82731092f3
  style a4c9b0ab_a403_0cdc_b209_a4be733ce62e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/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>
  )
}