Fieldset

Fieldset (필드셋)

공통 이름 아래에 선택적으로 그룹화된 폼 컨트롤 묶음 컴포넌트예요. 관련된 폼 필드들을 하나의 그룹으로 묶을 때 사용해요.

출처: 문서

import { Fieldset } from "@chakra-ui/react"

<Fieldset.Root>
  <Fieldset.Legend />
  <Fieldset.Content />
</Fieldset.Root>

disabled prop을 사용해서 fieldset을 비활성화하면 fieldset 안의 모든 입력 요소를 비활성화할 수 있어요.

| 예제 (fieldset-with-disabled) |

invalid prop을 사용해서 fieldset을 잘못된 상태로 표시할 수 있어요. 그러면 오류 텍스트가 표시돼요.

참고: fieldset 안의 각 입력 요소를 잘못된 상태로 만들려면 해당 Field 컴포넌트에도 invalid prop을 넘겨야 해요.

| 예제 (fieldset-with-invalid) |

| PropTable (Fieldset / Root) |

Fieldset 컴포넌트의 각 부분을 인터랙티브하게 살펴볼 수 있어요. 사이드바에서 부분을 클릭하면 미리보기에서 강조 표시돼요.

| 예제 (fieldset-explorer-demo) |