FormField#

라벨 행(필수 표시 포함) · 입력 child · 그 아래 description 또는 error 를 세로로 쌓는 폼 필드 래퍼입니다. Form 컴포넌트가 내부적으로 각 필드를 이 위젯으로 감쌉니다. Gap 간격은 CoreFormFieldStyle 의 nested CoreGapStyle 슬롯으로 흐릅니다. Flutter / Web 1:1 동일 API 입니다.

Live Preview#

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

  @override
  Component build(BuildContext context) {
    return div(
      styles: Styles(raw: {'width': '320px'}),
      [
        FormField(
          label: '이메일',
          description: '회사 이메일을 입력하세요.',
          required: true,
          child: TextField(placeholder: Text('you@company.com')),
        ),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 320,
      child: FormField(
        label: '이메일',
        description: '회사 이메일을 입력하세요.',
        required: true,
        child: TextField(placeholder: const Text('you@company.com')),
      ),
    );
  }
}

사용법#

// Flutter / Web 동일
FormField(
  label: '이메일',
  description: '회사 이메일을 입력하세요.',
  required: true,
  child: TextField(placeholder: const Text('you@company.com')),
)

Props#

FormControl 도 유사한 라벨·에러·설명 래퍼지만, FormField 가 Form 컴포넌트의 실제 필드 래퍼입니다.