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.
Top comments (0)