Checkbox
Checkbox는 하나 혹은 여러 개의 선택지를 선택할 수 있는 컴포넌트입니다.Anatomy
체크박스를 구성하는 요소를 설명합니다.
Rules of Use
Sitemap
Sitemap은 각 서비스별로 내용과 로우의 수가 다르게 사용됩니다. [구름] 카테고리는 서비스별로 동일하게 사용합니다.
Spacing Vertical
좌측 정렬을 기본으로 합니다. 각 텍스트의 가독성을 위해 8px의 최소 간격을 가집니다.
Spacing Horizontal
중앙 정렬을 기본으로 합니다. 각 선택지가 구분되도록 16px의 최소 간격을 가집니다.
State
Checkbox는 Status에 따라 checked, unchecked, inderterminated로 나뉩니다. 모든 Status에서 default, active, disabled 상태로 보여질 수 있습니다. hover, focus, invalid 상태는 unchecked일 때에만 보여집니다. 이때 hover와 focus는 같은 기능을 수행하는 것으로 간주해 같은 형태로 보여집니다.
Size
Checkbox는 필요에 따라 sm, md사이즈로 사용할 수 있습니다.
Import
Examples
Props
name | description | default |
---|---|---|
id | Checkbox의 id입니다. string | checkbox |
className | Checkbox의 className입니다. string | |
disabled | Checkbox를 비활성화 시킵니다. boolean | false |
indeterminated | Checkbox의 indeterminate 상태를 설정합니다. boolean | false |
label | Checkbox의 label입니다. stringnumberReact.ReactNode | |
helpLabel | Checkbox의 helpLabel입니다. string | |
helpPlacement | Checkbox의 helpPlacement입니다. auto-startautoauto-endtop-starttoptop-endright-startrightright-endbottom-endbottombottom-startleft-endleftleft-start | top |