Checkbox

Checkbox는 하나 혹은 여러 개의 선택지를 선택할 수 있는 컴포넌트입니다.
TypescriptWAI-ARIA
Anatomy

체크박스를 구성하는 요소를 설명합니다.

AnatomyImage
Rules of Use
  • RulesofUseImage
    Sitemap

    Sitemap은 각 서비스별로 내용과 로우의 수가 다르게 사용됩니다. [구름] 카테고리는 서비스별로 동일하게 사용합니다.

  • RulesofUseImage
    Spacing Vertical

    좌측 정렬을 기본으로 합니다. 각 텍스트의 가독성을 위해 8px의 최소 간격을 가집니다.

    Spacing Horizontal

    중앙 정렬을 기본으로 합니다. 각 선택지가 구분되도록 16px의 최소 간격을 가집니다.

  • RulesofUseImage
    State

    Checkbox는 Status에 따라 checked, unchecked, inderterminated로 나뉩니다. 모든 Status에서 default, active, disabled 상태로 보여질 수 있습니다. hover, focus, invalid 상태는 unchecked일 때에만 보여집니다. 이때 hover와 focus는 같은 기능을 수행하는 것으로 간주해 같은 형태로 보여집니다.

  • RulesofUseImage
    Size

    Checkbox는 필요에 따라 sm, md사이즈로 사용할 수 있습니다.

Import
import { Checkbox } from '@goorm-dev/vapor-components';
Examples
Props
namedescriptiondefault
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