MultiAnswerCard#

퀴즈·설문처럼 답안을 카드 형태로 보여주고 선택 상태를 강조하는 컴포넌트입니다. 불투명한 [value]를 가지며, selected 상태에 따라 테두리·배경 색이 달라집니다.

Live Preview#

class MultiAnswerCardDefaultExample extends StatefulComponent {
  const MultiAnswerCardDefaultExample({super.key});

  @override
  State<MultiAnswerCardDefaultExample> createState() =>
      _MultiAnswerCardDefaultExampleState();
}

class _MultiAnswerCardDefaultExampleState
    extends State<MultiAnswerCardDefaultExample> {
  final Set<String> _selected = {'a'};

  void _toggle(String value) {
    setState(() {
      if (_selected.contains(value)) {
        _selected.remove(value);
      } else {
        _selected.add(value);
      }
    });
  }

  @override
  Component build(BuildContext context) {
    return Component.element(
      tag: 'div',
      styles: Styles(raw: {'display': 'flex', 'flex-direction': 'column'}),
      children: [
        MultiAnswerCard<String>(
          value: 'a',
          selected: _selected.contains('a'),
          onChanged: _toggle,
          child: Component.text('Answer A'),
        ),
        Gap.space8(),
        MultiAnswerCard<String>(
          value: 'b',
          selected: _selected.contains('b'),
          onChanged: _toggle,
          child: Component.text('Answer B'),
        ),
      ],
    );
  }
}

class MultiAnswerCardDefaultExample extends StatefulWidget {
  const MultiAnswerCardDefaultExample({super.key});

  @override
  State<MultiAnswerCardDefaultExample> createState() =>
      _MultiAnswerCardDefaultExampleState();
}

class _MultiAnswerCardDefaultExampleState
    extends State<MultiAnswerCardDefaultExample> {
  final Set<String> _selected = {'a'};

  void _toggle(String value) {
    setState(() {
      if (_selected.contains(value)) {
        _selected.remove(value);
      } else {
        _selected.add(value);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        MultiAnswerCard<String>(
          value: 'a',
          selected: _selected.contains('a'),
          onChanged: _toggle,
          child: const Text('Answer A'),
        ),
        const Gap.space8(),
        MultiAnswerCard<String>(
          value: 'b',
          selected: _selected.contains('b'),
          onChanged: _toggle,
          child: const Text('Answer B'),
        ),
      ],
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

• 답안 항목을 카드로 보여주고 선택 여부를 강조해야 하는 경우
• 다중 선택 설문/퀴즈 UI

대신 다른 컴포넌트를 사용하세요:

• Checkbox: 텍스트 라벨 옆 체크박스로 충분한 경우
• MultipleChoice: 그룹 단위 선택 관리가 필요한 경우

기본 사용법 (Basic Usage)#

MultiAnswerCard<String>(
  value: 'a',
  selected: picked.contains('a'),
  onChanged: (v) => setState(() => toggle(v)),
  child: const Text('Answer A'),
)

MultiAnswerCard<String>(
  value: 'a',
  selected: picked.contains('a'),
  onChanged: (v) => setState(() => toggle(v)),
  child: Component.text('Answer A'),
)

Props / Parameters#

동작 스펙 (Behavior)#

인터랙션#

• 클릭/탭: onChanged에 value 전달
• 선택 상태: 두꺼운 테두리(primary) + 선택 배경
• 호버: 미선택 카드는 hover 배경색 적용
• enabled가 false이면 비활성 (커서 forbidden)

접근성 (Accessibility)#

• role="button" + aria-pressed (선택 상태)
• 비활성 시 aria-disabled="true"

크로스 플랫폼 차이점 (Platform Differences)#

관련 컴포넌트 (Related Components)#

• MultipleChoice: 그룹 단위 선택 관리
• Checkbox: 단순 체크박스