Fieldset

하나의 질문에 함께 답하는 컨트롤 묶음이고, 그 묶음에 이름이 붙습니다. 자기 표면은 그리지 않고 컨트롤을 묶기만 합니다.

import { Fieldset, TextField } from 'neba';

<Fieldset legend="Billing address" description="Where the card statement goes.">
  <TextField label="Street" name="street" />
  <TextField label="City" name="city" />
</Fieldset>;

Props

Prop	타입	기본값	설명
legend	ReactNode	—	묶음의 이름. 안의 모든 컨트롤의 접근 가능한 이름이 되므로, 각 컨트롤 앞에 붙여 읽어도 말이 되는 구절이어야 합니다
description	ReactNode	—	legend 아래 한 줄
disabled	boolean	false	안의 모든 컨트롤을 한 번에 비활성화합니다. 진짜 fieldset만 할 수 있는 일입니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	legend의 타입 스케일과 컨트롤 사이의 간격. 컨트롤 자체에는 닿지 않습니다
children	ReactNode	—	묶이는 컨트롤들

<fieldset>의 모든 속성이 color를 제외하고 그대로 전달됩니다. 브라우저 자체의 테두리·여백·마진은 지워집니다. 표면이 필요하면 Card나 Box 안에 두세요.

예시

legend · description

legend는 안에 있는 모든 컨트롤의 접근 가능한 이름이 됩니다. 그래서 각 컨트롤 앞에 붙여 읽어도 말이 되는 구절이어야 합니다. "Where should we send it?"이 아니라 "Billing address"입니다. description은 그 아래 한 줄입니다.

disabled

진짜 <fieldset>만 할 수 있는 일입니다. 안의 모든 컨트롤에 닿습니다. 세 단계 아래의 컴포넌트가 렌더링해 이 fieldset의 존재조차 모르는 컨트롤까지 포함해서입니다.

import { useState } from 'react';
import { Checkbox, Fieldset, TextField } from 'neba';

export default function FieldsetDisabled() {
  const [custom, setCustom] = useState(false);

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Checkbox label="Ship to a different address" checked={custom} onCheckedChange={setCustom} />
      <Fieldset legend="Delivery address" disabled={!custom}>
        <TextField label="Street" name="ship-street" />
        <TextField label="City" name="ship-city" />
      </Fieldset>
    </div>
  );
}

size

size는 legend의 타입 스케일과 컨트롤이 놓이는 간격입니다. 컨트롤 자체에는 닿지 않습니다. sm field들의 묶음은 sm field로 직접 쓰면 됩니다.

import { Fieldset, TextField } from 'neba';

const sizes = ['sm', 'md', 'lg'] as const;

export default function FieldsetSizes() {
  return (
    <div className="grid w-full max-w-3xl grid-cols-1 gap-6 sm:grid-cols-3">
      {sizes.map((size) => (
        <Fieldset key={size} size={size} legend={size} description="Legend and gap.">
          <TextField size={size} label="Street" name={`${size}-street`} />
          <TextField size={size} label="City" name={`${size}-city`} />
        </Fieldset>
      ))}
    </div>
  );
}

접근성

• role="group"을 가진 진짜 <fieldset>으로 렌더링되고, aria-labelledby로 legend와 연결됩니다.
• 스크린 리더는 안의 컨트롤마다 legend를 먼저 읽습니다. legend를 질문이 아니라 구절로 쓰는 이유입니다.