Fieldset

Fieldset (필드셋)

Fieldset 컴포넌트는 폼 안에서 관련된 요소들을 하나의 그룹으로 묶어 주는 컴포넌트예요. 시맨틱한 fieldset/legend 구조를 사용해요.

출처: 문서

본문

legend prop으로 그룹의 제목을 지정할 수 있어요. 관련된 입력 요소들을 하나의 Fieldset으로 묶으면 폼의 구조를 명확하게 할 수 있어요.

import { Fieldset, TextInput } from '@mantine/core';

function Demo() {
  return (
    <Fieldset legend="Personal information">
      <TextInput label="Your name" placeholder="Your name" />
      <TextInput label="Email" placeholder="Email" mt="md" />
    </Fieldset>
  );
}

비활성화 (Disabled)

disabled prop은 fieldset 안의 모든 input과 button을 비활성화해요.

import { Fieldset, TextInput, Button, Group } from '@mantine/core';

function Demo() {
  return (
    <Fieldset legend="Personal information" disabled>
      <TextInput label="Your name" placeholder="Your name" />
      <TextInput label="Email" placeholder="Email" mt="md" />

      <Group justify="flex-end" mt="md">
        <Button>Submit</Button>
      </Group>
    </Fieldset>
  );
}

더 알아보기 (Learn more)

• TextInput — 텍스트 입력 컴포넌트
• Group — 요소 가로 배치