New in AgnosticUI: SelectionButtonGroup & SelectionCardGroup

Source: Dev.to

SelectionButtonGroup

Button‑styled radio/checkbox controls for compact selection UIs.

Perfect for

• Tag/filter selection
• Multi‑select pill buttons
• Compact preference toggles
• Form inputs where cards feel too heavy

Features

• 3 sizes: sm, md, lg
• 3 shapes: rectangular, rounded, capsule
• 6 themes: primary, success, info, warning, error, monochrome
• Full keyboard navigation (arrow keys)
• Accessible with proper ARIA semantics

  Credit Card
  PayPal

SelectionCardGroup

Card‑based selection UI for rich content selection.

Perfect for

• Onboarding flows
• Pricing tier selection
• Feature preferences
• User interests

Features

• Radio (single) & checkbox (multiple) modes
• Slotted content for rich cards
• Responsive grid layout
• CSS Parts API for deep customization
• Same keyboard navigation & accessibility as the button group

  
    Analytics
    
Track user behavior

Compatibility

• Frameworks: React, Vue, Lit/Web Components, Svelte
• Modes: Controlled & uncontrolled

These components emerged organically while building our Onboarding Playbook (think Login Playbook but for user onboarding flows). When you build real UI patterns, the component needs to reveal itself!

Onboarding Playbook drops later this week 🎉