RadioGroupChoiceCard() — ui Function Reference

Architecture documentation for the RadioGroupChoiceCard() function in radio-group-choice-card.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ RadioGroupChoiceCard() — ui Function Reference

Dependency Diagram

graph TD
  01956f8c_cf91_8073_f2b9_c21a4e3ae40a["RadioGroupChoiceCard()"]
  e92ac2c2_6efa_80a9_c136_087132047d58["radio-group-choice-card.tsx"]
  01956f8c_cf91_8073_f2b9_c21a4e3ae40a -->|defined in| e92ac2c2_6efa_80a9_c136_087132047d58
  style 01956f8c_cf91_8073_f2b9_c21a4e3ae40a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/radio-group-choice-card.tsx lines 10–46

export function RadioGroupChoiceCard() {
  return (
    <RadioGroup defaultValue="plus" className="max-w-sm">
      <FieldLabel htmlFor="plus-plan">
        <Field orientation="horizontal">
          <FieldContent>
            <FieldTitle>Plus</FieldTitle>
            <FieldDescription>
              For individuals and small teams.
            </FieldDescription>
          </FieldContent>
          <RadioGroupItem value="plus" id="plus-plan" />
        </Field>
      </FieldLabel>
      <FieldLabel htmlFor="pro-plan">
        <Field orientation="horizontal">
          <FieldContent>
            <FieldTitle>Pro</FieldTitle>
            <FieldDescription>For growing businesses.</FieldDescription>
          </FieldContent>
          <RadioGroupItem value="pro" id="pro-plan" />
        </Field>
      </FieldLabel>
      <FieldLabel htmlFor="enterprise-plan">
        <Field orientation="horizontal">
          <FieldContent>
            <FieldTitle>Enterprise</FieldTitle>
            <FieldDescription>
              For large teams and enterprises.
            </FieldDescription>
          </FieldContent>
          <RadioGroupItem value="enterprise" id="enterprise-plan" />
        </Field>
      </FieldLabel>
    </RadioGroup>
  )
}