Tinyrack

Checkbox Group

여러 체크박스 값을 controlled, uncontrolled 또는 폼 연동 상태로 함께 관리해요.

독립적으로 전환할 수 있는 여러 값을 하나의 controlled, uncontrolled 또는 이름 있는 폼 필드로 관리해요.

핵심 속성

속성설명
상태 관리그룹이 선택을 관리하면 defaultValue를, controlled 상태에는 value와 onValueChange를 함께 사용해요.
사용 가능 여부그룹 disabled는 모든 자식의 동작을 막아요. 자식 readOnly는 값을 보여주되 바꾸지 못하게 해요.
폼name을 지정하면 선택된 문자열 목록을 가장 가까운 TRForm에 등록해요. disabled 그룹은 제외돼요.
단일 선택값 하나만 선택해야 한다면 TRRadioGroup을 사용해요.

각 TRCheckbox에 고유한 value와 보이는 레이블을 제공하세요. MergeSemantics로 체크박스와 인접한 레이블을 하나의 시맨틱 단위로 묶어요.

설치

패키지를 추가한 뒤 공개 라이브러리를 가져오세요.

flutter pub add tinyrack_ui
import 'package:tinyrack_ui/tinyrack_ui.dart';

플레이그라운드

사용법

import 'package:material_ui/material_ui.dart';
import 'package:tinyrack_ui/tinyrack_ui.dart';

TRCheckboxGroup(
  defaultValue: const ['metrics'],
  onValueChange: setValues,
  children: const [
    MergeSemantics(
      child: Row(
        mainAxisSize: MainAxisSize.min,
        spacing: TRSpacing.small,
        children: [
          TRCheckbox(value: 'metrics'),
          TRText('Metrics', variant: TRTextVariant.bodySm),
        ],
      ),
    ),
    MergeSemantics(
      child: Row(
        mainAxisSize: MainAxisSize.min,
        spacing: TRSpacing.small,
        children: [
          TRCheckbox(value: 'alerts'),
          TRText('Alerts', variant: TRTextVariant.bodySm),
        ],
      ),
    ),
  ],
)

예시

옵션 목록 고유 링크

체크박스마다 보이는 레이블을 붙이고, 그룹이 초기 선택을 관리할 때는 defaultValue를 사용해요.

편집 가능, 읽기 전용, 비활성 고유 링크

값을 그대로 보여줘야 한다면 개별 체크박스에 readOnly를 설정하고, 모든 자식의 동작을 막으려면 그룹을 비활성화하세요.

값을 한 개나 두 개 골라요 고유 링크

제품 규칙에 최소와 최대 선택 개수가 있다면 값 목록을 제어해요.

모두 선택과 일부 선택 상태 고유 링크

controlled 값 목록으로 별도 체크박스를 제어해 모두 선택과 일부 선택 상태를 제공해요.

이름 있는 폼 값 모으기 고유 링크

그룹에 name을 지정하면 TRFormState.save() 결과에 선택된 문자열 목록이 포함돼요.

API

선택과 상호작용

Prop타입 / 기본값용도
value, defaultValueList<String>?, List<String> = const []선택 값을 제어하거나 초기화해요.
onValueChangeValueChanged<List<String>>?다음 선택 문자열 목록을 전달해요.
childrenList<Widget>null이 아닌 값을 가진 하위 TRCheckbox만 선택에 참여해요.
disabledbool = false모든 자식을 비활성화하고 이름 있는 그룹을 TRFormValues에서 제외해요.
nameString?선택 목록을 가장 가까운 TRForm에 등록해요.