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

<ag-selection-button-group type="radio" name="payment" shape="rounded">
  <ag-selection-button value="card">Credit Card</ag-selection-button>
  <ag-selection-button value="paypal">PayPal</ag-selection-button>
</ag-selection-button-group>

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

<ag-selection-card-group type="checkbox" name="features">
  <ag-selection-card value="analytics" label="Analytics">
    <div>Analytics</div>
    <p>Track user behavior</p>
  </ag-selection-card>
</ag-selection-card-group>

Both Components Support:

☐ React, Vue, Lit/Web Components, Svelte
☐ Theme variants for semantic states

☐ Controlled & uncontrolled modes
☐ Full TypeScript support
☐ Zero runtime dependencies

Discovery Process

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 reveal themselves!

Onboarding Playbook drops later this week 🎉

Documentation

AgnosticUI remains committed to truly framework-agnostic components that work identically across all major frameworks.

webdev #javascript #react #vue #svelte #webcomponents #opensource

StackFeed

New in AgnosticUI: SelectionButtonGroup & SelectionCardGroup