Design Docs - Zaritalk UI

Category Selection (colCount: 3)3열 그리드 형태의 다중 선택

Day Selection (colCount: 7)7열 그리드 형태의 요일 선택

Props

Name	Type	Default	Required	Description
name	string		Yes	React Hook Form에 등록할 필드 이름
items	string	[]	Yes	체크박스 아이템 배열 (key, value)
colCount	number	3	-	한 줄에 표시할 아이템 개수
labelText	string		-	체크박스 그룹 레이블
disabled	boolean	false	-	비활성화 상태
outerClassName	string		-	외부 컨테이너 클래스명
className	string		-	체크박스 컨테이너 클래스명
customStyle	string	{}	-	커스텀 스타일
labelClassName	string		-	레이블 클래스명
placeholder	string		-	플레이스홀더 텍스트

Sub Components• FormProvider - React Hook Form의 FormProvider 내부에서 사용해야 합니다.• Empty Items - items 배열의 key가 "EMPTY"인 항목은 빈 공간으로 표시되며 선택할 수 없습니다.• Column Count - colCount로 한 줄에 표시할 항목 개수를 조절할 수 있습니다.• Value Format - 선택된 값은 배열 형태로 저장됩니다.

Design Docs

MultiCheckBox다중 선택 체크박스 컴포넌트입니다. React Hook Form과 함께 사용됩니다.

Examples

Props

Name	Type	Default	Required	Description
name	string		Yes	React Hook Form에 등록할 필드 이름
items	string	[]	Yes	체크박스 아이템 배열 (key, value)
colCount	number	3	-	한 줄에 표시할 아이템 개수
labelText	string		-	체크박스 그룹 레이블
disabled	boolean	false	-	비활성화 상태
outerClassName	string		-	외부 컨테이너 클래스명
className	string		-	체크박스 컨테이너 클래스명
customStyle	string	{}	-	커스텀 스타일
labelClassName	string		-	레이블 클래스명
placeholder	string		-	플레이스홀더 텍스트