Radio Group

Source: packages/shared/components/ui/radio-group.tsx Primitives: @radix-ui/react-radio-group

import {
  RadioGroup,
  RadioGroupItem,
} from "@prosper/shared/components/ui/radio-group";

---

Preview

Full-time

Part-time

Contract

Sub-components

Component	Description
RadioGroup	Root — manages selected value
RadioGroupItem	Individual radio circle

---

Default Styling

• Item: size-4 (16px) circle, border-primary
• Selected indicator: inner filled circle via bg-primary
• Focus: ring with ring-ring/50

---

Usage in the Codebase

Landing — ContactPage

<RadioGroup
  value={formData.inquiry_type}
  onValueChange={(value) => handleSelectChange("inquiry_type", value)}
  className="flex flex-wrap gap-4"
>
  {["General Inquiry", "Partnership", "Career Opportunities", "Other"].map((type) => (
    <Label key={type} className="flex items-center gap-2 cursor-pointer">
      <RadioGroupItem value={type} />
      <span>{type}</span>
    </Label>
  ))}
</RadioGroup>

---

Notes

• Override in Landing ContactPage: className="flex flex-wrap gap-4" changes the default vertical stack to a horizontal wrapping layout for the inquiry type options.