MultipleChoice#

여러 옵션을 나열하고 그중 하나만 선택할 수 있는 단일 선택 그룹 컴포넌트입니다. allowUnselect가 true이면 선택된 옵션을 다시 눌러 선택을 해제할 수 있습니다.

Live Preview#

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

  @override
  State<MultipleChoiceDefaultExample> createState() =>
      _MultipleChoiceDefaultExampleState();
}

class _MultipleChoiceDefaultExampleState
    extends State<MultipleChoiceDefaultExample> {
  String? _value = 'md';

  @override
  Component build(BuildContext context) {
    return MultipleChoice<String>(
      options: const [
        (value: 'sm', label: 'Small'),
        (value: 'md', label: 'Medium'),
        (value: 'lg', label: 'Large'),
      ],
      value: _value,
      onChanged: (v) => setState(() => _value = v),
    );
  }
}

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

  @override
  State<MultipleChoiceDefaultExample> createState() =>
      _MultipleChoiceDefaultExampleState();
}

class _MultipleChoiceDefaultExampleState
    extends State<MultipleChoiceDefaultExample> {
  String? _value = 'md';

  @override
  Widget build(BuildContext context) {
    return MultipleChoice<String>(
      options: const [
        (value: 'sm', label: 'Small'),
        (value: 'md', label: 'Medium'),
        (value: 'lg', label: 'Large'),
      ],
      value: _value,
      onChanged: (v) => setState(() => _value = v),
    );
  }
}

사용 시기 (When to Use)#

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

• 크기 / 옵션처럼 적은 수의 후보 중 하나를 버튼 형태로 선택할 때
• 라디오 버튼보다 강조된 선택 UI가 필요할 때

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

• RadioGroup: 전통적인 라디오 버튼 형태가 필요할 때
• Select: 옵션이 많아 드롭다운이 적합할 때

기본 사용법 (Basic Usage)#

MultipleChoice<String>(
  options: const [
    (value: 'sm', label: 'Small'),
    (value: 'md', label: 'Medium'),
    (value: 'lg', label: 'Large'),
  ],
  value: size,
  onChanged: (v) => setState(() => size = v),
)

MultipleChoice<String>(
  options: const [
    (value: 'sm', label: 'Small'),
    (value: 'md', label: 'Medium'),
    (value: 'lg', label: 'Large'),
  ],
  value: size,
  onChanged: (v) => setState(() => size = v),
)

Props / Parameters#

동작 스펙 (Behavior)#

• 선택: 옵션 클릭 시 해당 값으로 onChanged 호출
• 해제: allowUnselect가 true일 때 선택된 옵션 재클릭 → onChanged(null)
• 단일 선택: 항상 최대 한 개만 선택됨

접근성 (Accessibility)#

• 컨테이너: role="radiogroup"
• 각 옵션: role="radio" + aria-checked

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

관련 컴포넌트 (Related Components)#

• RadioGroup: 라디오 버튼 단일 선택
• Select: 드롭다운 선택
• ChipGroup: 칩 형태 다중 선택