Types

Choice의 기본 형태는 input 요소의 type 값에따라 달라집니다.

type="checkbox"	type="radio"

States

Type / State	Default	:checked	:disabled	is-readonly	is-error
checkbox	Text	Text	Text	Text	Text
radio	Text	Text	Text	Text	Text

<div class="choice is-readonly is-error">
	<input type="checkbox" id="아이디" checked disabled>
	<label for="아이디">
		<span class="custom-mark"></span>
		<span class="choice-label">텍스트</span>
	</label>
</div>

<div class="choice is-readonly is-error">
	<input type="radio" id="아이디" checked disabled>
	<label for="아이디">
		<span class="custom-mark"></span>
		<span class="choice-label">텍스트</span>
	</label>
</div>

Choice-chip

체크박스를 칩 형태로 표시하는 변형 패턴입니다. 네이밍은 choice-chip을 사용하고, 변형은 is-filled로 표현합니다.

default (unselect)	filled	select	disabled
학교급	학교급	학교급	교육과정

<div class="choice-chip is-filled">
	<input type="checkbox" id="chip-id">
	<label for="chip-id">
		<span class="choice-label">학교급</span>
		<i class="icon icon-check is-sm" aria-hidden="true"></i>
	</label>
</div>