Fieldset
관련 컨트롤을 접근 가능한 네이티브 legend 하나로 묶어요.
핵심 속성
Root는 네이티브 <fieldset>을 렌더링해요. Legend는 기본적으로 네이티브 <legend>를 렌더링해 그룹에 접근 가능한 이름을 붙여요. 하위 컨트롤에는 저마다 고유한 표시 레이블이 필요해요. 컨트롤과 TRField.Label을 TRField.Item에 함께 두면 아이템이 그 안의 컨트롤에 레이블을 연결하니 id나 htmlFor가 필요 없어요. TRField.Item에는 TRField.Root 조상이 반드시 필요해요. 아이템을 하나의 TRField.Root로 묶어 Root 안에 두고, 필드셋의 간격을 유지하려면 그 루트에 gap을 지정하세요. Root에 disabled를 주면 네이티브 폼 컨트롤 비활성화가 하위로 전파돼요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/fieldset.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRFieldset } from '@tinyrack/ui/components/fieldset';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
API
TRFieldsetRoot와 TRFieldsetLegend는 개별적으로 내보내며, TRFieldset.Root와 TRFieldset.Legend로도 사용할 수 있어요.
| 파트 | 설명 |
|---|---|
Root | 네이티브 fieldset 속성, disabled, render, className, style, 이벤트, ref |
Legend | 기본적으로 네이티브 legend를 렌더링하며 render, className, style, 이벤트, ref 지원 |
네이티브 <legend> 배치가 적합하지 않을 때만 render를 사용하세요. 사용자 지정 legend도 Base UI가 aria-labelledby로 fieldset과 연결해요.