Variants

Blue (Default)

<RadioGroup value="PER_USER" onValueChange={() => {}}>
  <RadioGroupItem value="ALWAYS" className="w-1/3">
    <span className="text-sand-11 font-medium">
      Every Mention
    </span>
  </RadioGroupItem>
  <RadioGroupItem value="PER_USER" className="w-1/3">
    <span className="text-sand-11 font-medium">
      Once Per User
    </span>
  </RadioGroupItem>
  <RadioGroupItem value="PER_CONVERSATION" className="w-1/3">
    <span className="text-sand-11 font-medium">
      Once Per Conversation
    </span>
  </RadioGroupItem>
</RadioGroup>

Orange

<RadioGroup variant="orange" value="option1" onValueChange={() => {}}>
  <RadioGroupItem variant="orange" value="option1" className="w-1/2">
    <span className="font-medium">
      Option 1
    </span>
  </RadioGroupItem>
  <RadioGroupItem variant="orange" value="option2" className="w-1/2">
    <span className="font-medium">
      Option 2
    </span>
  </RadioGroupItem>
</RadioGroup>

Layouts

Vertical

<RadioGroup layout="vertical" value="basic" onValueChange={() => {}}>
  <RadioGroupItem value="basic">
    <div className="w-full text-left">
      <h4 className="font-semibold">
        Basic Plan
      </h4>
      <p className="text-sand-11 text-sm">
        Perfect for getting started
      </p>
    </div>
  </RadioGroupItem>
  <RadioGroupItem value="pro">
    <div className="w-full text-left">
      <h4 className="font-semibold">
        Pro Plan
      </h4>
      <p className="text-sand-11 text-sm">
        For growing businesses
      </p>
    </div>
  </RadioGroupItem>
</RadioGroup>

Grid

<RadioGroup layout="grid" defaultValue="small">
  <RadioGroupItem value="small">
    <span className="font-medium">
      Small
    </span>
  </RadioGroupItem>
  <RadioGroupItem value="medium">
    <span className="font-medium">
      Medium
    </span>
  </RadioGroupItem>
  <RadioGroupItem value="large">
    <span className="font-medium">
      Large
    </span>
  </RadioGroupItem>
  <RadioGroupItem value="xl">
    <span className="font-medium">
      X-Large
    </span>
  </RadioGroupItem>
</RadioGroup>