Radio group

import { BuiRadioGroup, BuiRadioGroupItem } from 'ng-blatui';

<div buiRadioGroup [(value)]="plan">
  <div class="flex items-center gap-3">
    <button buiRadioItem value="free" aria-label="Default"></button><span>Default</span>
  </div>
  <div class="flex items-center gap-3">
    <button buiRadioItem value="pro" aria-label="Comfortable"></button><span>Comfortable</span>
  </div>
</div>

<div buiRadioGroup [(value)]="pay" class="flex items-center gap-5">
  <div class="flex items-center gap-2"><button buiRadioItem value="card" aria-label="Card"></button><span>Card</span></div>
  <div class="flex items-center gap-2"><button buiRadioItem value="paypal" aria-label="PayPal"></button><span>PayPal</span></div>
</div>

<div class="flex items-start gap-3">
  <button buiRadioItem value="all" aria-label="All new messages" class="mt-0.5"></button>
  <div><span class="font-medium">All new messages</span><p class="text-muted-foreground text-sm">Notify for every message.</p></div>
</div>

<!-- override the dot/border via data-state -->
<button buiRadioItem value="success" class="text-success data-[state=checked]:border-success" aria-label="Success"></button>

<div buiRadioGroup [(value)]="plan" class="grid gap-3 sm:grid-cols-3">
  <label class="has-[[data-state=checked]]:border-primary has-[[data-state=checked]]:ring-ring/40 flex flex-col gap-1 rounded-lg border p-4 has-[[data-state=checked]]:ring-[3px]">
    <div class="flex items-center justify-between"><span class="font-medium">Pro</span><button buiRadioItem value="pro" aria-label="Pro"></button></div>
    <span class="text-muted-foreground text-xs">$29 / month</span>
  </label>
</div>

<button buiRadioItem value="free" [disabled]="true" aria-label="Default"></button>