Field Shell
Field Shell
라벨과 입력 영역을 한 셀로 묶는 저수준 프리미티브입니다. 셀이 직접 기본으로 그리는 건 아래 보더뿐이라 라운드나 카드 배경은 없고, 여러 개를 붙이면 표 형태의 폼이 됩니다. 바깥을 닫는 건 쓰는 쪽 몫입니다. (Filter Panel도 이 위에 올라가 있고, bordered와rounded를 함께 주면 라운드 카드가 됩니다.)
기본
FieldShell / FieldShell.Label / FieldShell.Content 조합. 셀 사이 세로선 없이, 첫 줄 위쪽만 컨테이너가 border-t로 닫았습니다.
테두리
bordered를 주면 각 셀의 왼쪽·아래 보더를 그립니다. 다양한col-span과 빈 칸이 있는 행에서도 컨테이너가 위·오른쪽 외곽을 닫아 보더가 겹치지 않습니다. 빈 칸은 FieldShell.Empty로 라벨·콘텐츠 영역과 보더를 이어줍니다. 라운드는 적용하지 않습니다.
크기
size는 sm 32px, md 36px,lg 40px입니다. 기본값은 md이며,FieldInput도 셀 크기를 따릅니다.
포커스
입력에 포커스가 가면 라벨 배경이 primary-soft로, 하단 보더가 primary로 바뀝니다. 위 인풋을 클릭해 보세요.
multiline
FieldShell.Content에 multiline을 주면 고정 높이 대신 상단 정렬 + 세로 패딩이 적용됩니다. FieldTextarea와 함께 씁니다.
2열 그리드
그리드로 감싸면 2열 상세 정보 레이아웃이 됩니다. 셀 사이에는 세로선을 표시하지 않습니다.
Select 조합
셀 안에 Select를 넣을 때는 fieldSelectTriggerClassName을 트리거에 붙여 보더와 그림자를 지웁니다. (버튼형 트리거는 fieldButtonTriggerClassName)
disabled
읽기 전용 값은 입력에 disabled를 주면 muted-foreground로 낮아집니다.