Fieldset#

관련된 폼 요소들을 논리적으로 그룹화하고 시각적으로 구분하는 컨테이너 컴포넌트입니다. Flutter/Web 양쪽에서 동일한 API(CoFieldset)를 제공합니다.

Live Preview#

class FieldsetDefaultExample extends StatelessComponent {
  const FieldsetDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return div(
      [
        CoFieldset(
          legend: const Text('Account'),
          children: [
            CoTextField(placeholder: const Text('Name')),
            CoTextField(placeholder: const Text('Email')),
          ],
        ),
      ],
      classes: 'w-${CoreSpace.scale.space256}',
    );
  }
}

class FieldsetDefaultExample extends StatelessWidget {
  const FieldsetDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: CoreSpace.space256,
      child: CoFieldset(
        legend: const Text('Account'),
        children: [
          CoTextField(placeholder: const Text('Name')),
          CoTextField(placeholder: const Text('Email')),
        ],
      ),
    );
  }
}

사용 시기 (When to Use)#

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

• 긴 폼을 주제별로 그룹화하여 시각적으로 구분해야 할 때 (기본 정보, 결제 정보, 배송 정보 등)
• 관련된 폼 필드들에 공통 제목(legend)이 필요할 때
• 특정 조건에서 관련 필드 그룹 전체를 비활성화해야 할 때

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

• Form: 폼 전체를 감싸는 루트 컨테이너
• Input: 단일 입력 필드
• Card: 폼 컨텍스트가 아닌 일반 그룹 컨테이너

기본 사용법 (Basic Usage)#

// 기본 (legend + children)
CoFieldset(
  legend: Text('Account'),
  children: [
    CoTextField(placeholder: Text('Name')),
    CoTextField(placeholder: Text('Email')),
  ],
)

// 비활성화
CoFieldset(
  legend: Text('Payment'),
  enabled: false,
  children: [
    CoTextField(placeholder: Text('Card number')),
  ],
)

// 기본 — Web 의 `Text` 는 jaspr Text 별칭이라
// Flutter 와 동일한 CoText chain (`.bodyMedium.onSurface` 등) 을 사용 가능.
CoFieldset(
  legend: const Text('Account'),
  children: [
    CoTextField(placeholder: const Text('Name')),
    CoTextField(placeholder: const Text('Email')),
  ],
)

// 비활성화
CoFieldset(
  legend: const Text('Payment'),
  enabled: false,
  children: [
    CoTextField(placeholder: const Text('Card number')),
  ],
)

Props / Parameters#

CoFieldset은 Flutter/Web에서 동일한 파라미터 이름을 사용합니다. 타입만 플랫폼별로 다릅니다.

Flutter 전용 스타일 오버라이드#

테마 커스터마이징 (Theme)#

CoreFieldsetTheme으로 프로젝트 레벨 스타일 오버라이드가 가능합니다.

CoreComponentTheme(
  fieldset: CoreFieldsetTheme(
    padding: 16.0,        // 기본: CoreSpace.space16
    gap: 12.0,            // 기본: CoreSpace.space12
    borderRadius: 12.0,
    borderWidth: 1.0,     // 기본: CoreBorderWidth.thin
    backgroundColor: coreColor,
    borderColor: coreColor,
    legendStyle: coreTextStyle,
  ),
)

Resolve 우선순위: 위젯 파라미터 > CoreFieldsetTheme > 디자인 시스템 기본값.

동작 스펙 (Behavior)#

시각#

• 테두리가 있는 컨테이너 + 상단에 legend 텍스트
• enabled: false → opacity 50%

레이아웃#

• 자식들은 세로로 배치되며 gap 간격 유지
• crossAxisAlignment: start (Flutter) / items-stretch (Web)

접근성 (Accessibility)#

• enabled: false일 때 data-disabled 속성 추가 (Web)
• legend는 시맨틱 제목으로 스크린 리더에 전달

관련 컴포넌트 (Related Components)#

• Form: 폼 루트 컨테이너
• FormField: 개별 필드 wrapping (label + input + error)
• Card: 일반 콘텐츠 그룹 컨테이너