Fieldset

관련된 컨트롤 여러 개를 제목 하나로 묶어요. 컨트롤 하나에는 Field만 써요.

사용 예시

기본 알림

FieldsetLegend가 그룹의 이름이 돼요. 스크린 리더는 각 컨트롤의 라벨과 함께 그룹 이름을 읽어요.

기본 알림

시간 일정

종일 일정

tsx

<Fieldset>  <FieldsetLegend>기본 알림</FieldsetLegend>  <Field>    <FieldLabel>시간 일정</FieldLabel>    <Select defaultValue="10">      {before.map(item => (        <SelectItem key={item.value} value={item.value}>          <SelectItemText>{item.label}</SelectItemText>        </SelectItem>      ))}    </Select>  </Field>  <Field>    <FieldLabel>종일 일정</FieldLabel>    <Select defaultValue="1">      {day.map(item => (        <SelectItem key={item.value} value={item.value}>          <SelectItemText>{item.label}</SelectItemText>        </SelectItem>      ))}    </Select>  </Field></Fieldset>

반복 직접 설정

함께 읽어야 뜻이 되는 값을 한 그룹에 둬요.

반복 직접 설정

간격

단위

tsx

<Fieldset>  <FieldsetLegend>반복 직접 설정</FieldsetLegend>  <div className="flex items-end gap-2">    <Field>      <FieldLabel>간격</FieldLabel>      <NumberField defaultValue={2} min={1} className="w-28" decrementLabel="간격 줄이기" incrementLabel="간격 늘리기" />    </Field>    <Field>      <FieldLabel>단위</FieldLabel>      <Select defaultValue="week">        {units.map(item => (          <SelectItem key={item.value} value={item.value}>            <SelectItemText>{item.label}</SelectItemText>          </SelectItem>        ))}      </Select>    </Field>  </div></Fieldset>

한꺼번에 비활성

disabled를 Fieldset에 주면 안의 컨트롤과 제목이 함께 비활성이 돼요. 알림을 켜 보세요.

일정 알림 받기

알림 시간

시간 일정

종일 일정

tsx

<Field layout="split">  <FieldLabel>일정 알림 받기</FieldLabel>  <Switch checked={notify} onCheckedChange={setNotify} /></Field><Fieldset disabled={!notify}>  <FieldsetLegend>알림 시간</FieldsetLegend>  <Field>    <FieldLabel>시간 일정</FieldLabel>    <Select defaultValue="10">      {before.map(item => (        <SelectItem key={item.value} value={item.value}>          <SelectItemText>{item.label}</SelectItemText>        </SelectItem>      ))}    </Select>  </Field>  <Field>    <FieldLabel>종일 일정</FieldLabel>    <Select defaultValue="1">      {day.map(item => (        <SelectItem key={item.value} value={item.value}>          <SelectItemText>{item.label}</SelectItemText>        </SelectItem>      ))}    </Select>  </Field></Fieldset>

배송지

우편번호

5자리 숫자예요.

상세 주소

권장

함께 입력하는 값은 제목 하나로 묶어서 어디에 속한 값인지 알려요.

배송지 우편번호

배송지 상세 주소

지양

라벨마다 같은 말을 붙이면 길어지고, 그룹이라는 정보가 스크린 리더에 전해지지 않아요.

컨트롤

방해 금지 시간

시작

끝

disabled

tsx

<Fieldset>  <FieldsetLegend>방해 금지 시간</FieldsetLegend>  <Field layout="split">    <FieldLabel>시작</FieldLabel>    <NumberField defaultValue={22} min={0} max={23} className="w-28" decrementLabel="한 시간 앞으로" incrementLabel="한 시간 뒤로" />  </Field>  <Field layout="split">    <FieldLabel>끝</FieldLabel>    <NumberField defaultValue={7} min={0} max={23} className="w-28" decrementLabel="한 시간 앞으로" incrementLabel="한 시간 뒤로" />  </Field></Fieldset>

명세

이름
이름	값	기본
Fieldset
disabled	boolean	false
안의 컨트롤을 모두 비활성으로 만들어요.
className	string	-
FieldsetLegend에도 쓸 수 있어요.
FieldsetLegend
children	ReactNode	-
그룹의 제목이에요. Fieldset의 이름이 돼요.