AgnosticUI의 새로운 기능: SelectionButtonGroup 및 SelectionCardGroup

Source: Dev.to

SelectionButtonGroup

버튼 형태의 라디오/체크박스 컨트롤로, 컴팩트한 선택 UI를 구현합니다.

활용에 적합한 경우

• 태그/필터 선택
• 다중 선택 필 버튼
• 컴팩트한 선호도 토글
• 카드 형태가 무거운 느낌을 주는 폼 입력

주요 기능

• 3가지 크기: sm, md, lg
• 3가지 형태: 직사각형, 라운드, 캡슐형
• 6가지 테마: primary, success, info, warning, error, monochrome
• 전체 키보드 네비게이션 지원 (화살표 키)
• 올바른 ARIA 의미론을 통한 접근성 보장

  Credit Card
  PayPal

SelectionCardGroup

리치 콘텐츠 선택을 위한 카드 기반 UI.

활용에 적합한 경우

• 온보딩 흐름
• 요금제 티어 선택
• 기능 선호도 설정
• 사용자 관심사

주요 기능

• 라디오(단일) 및 체크박스(다중) 모드
• 풍부한 카드를 위한 슬롯 콘텐츠 지원
• 반응형 그리드 레이아웃
• 깊은 커스터마이징을 위한 CSS Parts API
• 버튼 그룹과 동일한 키보드 네비게이션 및 접근성

  
    Analytics
    
Track user behavior

Compatibility

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

이 컴포넌트들은 온보딩 플레이북(로그인 플레이북을 사용자 온보딩 흐름에 적용한 개념)을 구축하면서 자연스럽게 탄생했습니다. 실제 UI 패턴을 만들 때, 컴포넌트는 스스로 모습을 드러내야 합니다!

온보딩 플레이북은 이번 주 말에 공개됩니다 🎉