Tinyrack

Fieldset

관련 폼 컨트롤을 테두리가 있는 영역으로 묶어요.

관련 폼 컨트롤을 테두리가 있는 영역으로 묶어요.

핵심 속성

속성설명
레전드legend는 위젯 슬롯이 아니라 위쪽 테두리에 겹쳐 그려지는 String이에요. null로 두면 캡션 없이 테두리만 있는 그룹이 돼요.
그룹 구성children은 가로로 늘어난 Column에 medium 간격으로 쌓이고, 토큰 기반 패딩·테두리·모서리 반경 안에 들어가요. 너비는 부모가 주는 만큼 차지하므로 더 좁은 그룹이 필요하면 부모를 제약하세요.
상태disabled는 비활성 불투명도 토큰으로 그룹을 흐리게 하고 Semantics에 비활성 상태로 표시해요. 내부 컨트롤까지 비활성으로 만들지는 않으니 각 컨트롤에도 disabled를 함께 넘기세요.
레이블레전드는 개별 컨트롤이 아니라 그룹의 이름이에요. 각 컨트롤에는 TRField나 옆에 둔 텍스트 위젯으로 눈에 보이는 레이블을 주고, TRCheckbox 같은 컨트롤에는 semanticLabel을 설정하세요.

알림 채널 선택처럼 여러 컨트롤이 하나의 질문에 함께 답할 때 TRFieldset을 쓰세요. 컨트롤이 세로 공간만 공유한다면 일반 Column으로 충분해요.

설치

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

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';

TRFieldset(
  legend: 'Notifications',
  children: [
    Row(
      mainAxisSize: MainAxisSize.min,
      spacing: TRSpacing.small,
      children: const [
        TRCheckbox(defaultChecked: true, semanticLabel: 'Email alerts'),
        TRText('Email alerts', variant: TRTextVariant.bodySm),
      ],
    ),
  ],
)

예시

알림 채널 고유 링크

`legend`로 그룹 이름을 정하고, 각 컨트롤에는 체크박스 옆에 보이는 레이블과 그에 맞는 `semanticLabel`을 함께 주세요.

활성 그룹과 비활성 그룹 고유 링크

`disabled`는 그룹을 흐리게 하고 보조 기술에도 비활성으로 알리지만, 내부 컨트롤의 조작까지 막지는 않아요. 편집을 막으려면 각 컨트롤에도 `disabled`를 넘기세요.

중첩 그룹 고유 링크

일부 선택지가 더 좁은 질문에 속한다면 필드셋을 중첩하세요. 각 단계가 자기 레전드를 유지하므로 관계를 읽기 쉬워요.

API

TRFieldset 속성

Prop타입 / 기본값용도
childrenList<Widget> · required묶을 컨트롤을 담아요. 항목 사이에 medium 간격을 둔, 가로로 늘어난 Column으로 배치돼요.
legendString? · null위쪽 테두리에 그룹 이름을 표시해요. 현재 텍스트 배율을 기준으로 크기를 재기 때문에 텍스트를 키워도 테두리 사이 여백이 유지돼요.
disabledbool · false비활성 불투명도 토큰을 적용하고 Semantics로 그룹을 비활성 상태로 노출해요. 하위 컨트롤은 각자의 활성 상태를 그대로 유지해요.