FieldGroup

Data Input

Field 들을 세로로 묶는 컨테이너.

미리보기 없음

렌더 결과가 Field 사이 간격뿐이라 단독 preview 로는 보이는 것이 없다.

Usage

여러 Field 를 한 덩어리로 묶고 간격 계층을 중첩으로 표현할 때 사용한다. 관련 있는 하위 필드끼리 더 조밀하게 붙여야 할 때 size 를 낮춰 중첩한다.

import

import { FieldGroup } from '@mildang/design-system/Form';

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

FieldGroup Props

Prop

Type

Default

size

"sm" | "md" | "lg"

같은 패밀리

@mildang/design-system/Form 에서 같이 내보내는 컴포넌트다.

ExpandableField

필드 하나의 field item 영역을 라벨 우측 토글로 펼치고/접는 필드.

Field

폼 아이템 하나를 감싸며 라벨·설명·도움말을 배치하는 컨테이너.

중첩으로 간격 계층 표현하기

FieldGroup 은 Field 들을 세로로만 묶는다 — 가로 배치나 컨트롤 내부 레이아웃은 Field 가 책임지고, FieldGroup 은 세로 스택과 간격만 담당한다.

간격 계층은 매번 손으로 값을 주지 않고 중첩으로 표현한다. 최상위 그룹은 기본값 lg(24px) 를 그대로 두고, 그 안에서 서로 관련된 하위 필드끼리 더 조밀하게 묶고 싶을 때만 안쪽 FieldGroup 에 sm(16px)이나 md(20px)를 준다.

여러 폼에서 반복되는 필드 묶음(주소·기간 등)은 withFieldGroup 으로 컴포넌트화해 재사용한다.

예제

size 비교 (sm / md / lg)

코드

Open in Playground

import { Stack } from '@mildang/styled-system/jsx';
import { Text } from '@mildang/design-system/Text';
import { FieldGroup } from '@mildang/design-system/Form';
import { InputFieldBase } from '@mildang/design-system/InputField';

const FieldGroupSizesExample = () => (
    <Stack gap="40" width="320px">
      {(['lg', 'md', 'sm'] as const).map((size) => (
        <Stack key={size} gap="8">
          <Text variant="caption-lg-medium" color="neutral.text.lowest">
            size=&quot;{size}&quot; (gap {size === 'lg' ? 24 : size === 'md' ? 20 : 8})
          </Text>
          <FieldGroup size={size}>
            <InputFieldBase label="필드 1" placeholder="입력" />
            <InputFieldBase label="필드 2" placeholder="입력" />
            <InputFieldBase label="필드 3" placeholder="입력" />
          </FieldGroup>
        </Stack>
      ))}
    </Stack>
  );

export default FieldGroupSizesExample;

중첩 (간격 계층)

코드

Open in Playground

import { FieldGroup } from '@mildang/design-system/Form';
import { InputFieldBase } from '@mildang/design-system/InputField';

const FieldGroupNestedExample = () => (
    <FieldGroup width="320px">
      <InputFieldBase label="상위 필드 A" placeholder="입력" />
      <InputFieldBase label="상위 필드 B" placeholder="입력" />
      <FieldGroup size="sm">
        <InputFieldBase label="하위 필드 1 (sm=8)" placeholder="입력" />
        <InputFieldBase label="하위 필드 2 (sm=8)" placeholder="입력" />
      </FieldGroup>
    </FieldGroup>
  );

export default FieldGroupNestedExample;

Playground

코드

Open in Playground

import { FieldGroup } from '@mildang/design-system/Form';
import { InputFieldBase } from '@mildang/design-system/InputField';

const STORY_DEFAULT_ARGS = { ...({ size: 'lg' }), ...({}) } as import("@mildang/styled-system/recipes").FieldGroupVariantProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@mildang/styled-system/types").UnstyledProps & import("@mildang/styled-system/types").AsProps & Omit<import("@mildang/styled-system/types").JsxStyleProps, "css"> & { sx?: import("@mildang/styled-system/types").SystemStyleObject | import("@mildang/styled-system/types").SystemStyleObject[]; };

const FieldGroupPlaygroundExampleRender = (args: import("@mildang/styled-system/recipes").FieldGroupVariantProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@mildang/styled-system/types").UnstyledProps & import("@mildang/styled-system/types").AsProps & Omit<import("@mildang/styled-system/types").JsxStyleProps, "css"> & { sx?: import("@mildang/styled-system/types").SystemStyleObject | import("@mildang/styled-system/types").SystemStyleObject[]; }) => (
    <FieldGroup {...args} width="320px">
      <InputFieldBase label="이름" placeholder="이름 입력" />
      <InputFieldBase label="이메일" placeholder="you@example.com" helperText="회사 이메일" />
      <InputFieldBase label="전화번호" placeholder="010-0000-0000" />
    </FieldGroup>
  );

export default function FieldGroupPlaygroundExample(props: Partial<import("@mildang/styled-system/recipes").FieldGroupVariantProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@mildang/styled-system/types").UnstyledProps & import("@mildang/styled-system/types").AsProps & Omit<import("@mildang/styled-system/types").JsxStyleProps, "css"> & { sx?: import("@mildang/styled-system/types").SystemStyleObject | import("@mildang/styled-system/types").SystemStyleObject[]; }>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as import("@mildang/styled-system/recipes").FieldGroupVariantProps & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@mildang/styled-system/types").UnstyledProps & import("@mildang/styled-system/types").AsProps & Omit<import("@mildang/styled-system/types").JsxStyleProps, "css"> & { sx?: import("@mildang/styled-system/types").SystemStyleObject | import("@mildang/styled-system/types").SystemStyleObject[]; };
  return FieldGroupPlaygroundExampleRender(mergedProps);
}