CSS: checkbox ​

.instui-checkbox — 네이티브 체크박스와 레이블, 또는 -variant-toggle로 표현한 스위치입니다.

혼합 상태 대시를 표시하려면 JavaScript에서 el.indeterminate = true을 설정하세요; 선택된 체크표시는 채우기 색에 맞춰 자동으로 대비를 맞춥니다 — 어두운 채우기에는 흰색, 밝은 채우기에는 거의 검은색에 가깝게 표시됩니다. 또한 컨트롤과 레이블 사이에 자체 gap을 설정합니다; -gap-* 간격 유틸리티 수식을 체이닝하면 내장 값이 재정의됩니다.

Source: checkbox.css

접근성 ​

네이티브 <input type="checkbox">는 :checked, :indeterminate, 및 :disabled을 구동합니다; 혼합 상태는 JavaScript에서 el.indeterminate = true를 설정하고, 체크박스에는 네이티브 readonly 속성이 없으므로 -readonly는 스타일링 전용임을 유의하세요.

사용법 ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/checkbox.css";

예제들 ​

html
<label class="instui-checkbox --display-block --mb-sm">
  <input type="checkbox" checked>Checkbox
</label>
<label class="instui-checkbox -variant-toggle">
  <input type="checkbox">Toggle
</label>

수정자 ​

수정자설명
.-invalid무효(오류) 상태입니다.
.-label-placement-end레이블을 컨트롤 뒤에 배치하세요.
.-label-placement-start레이블을 컨트롤 앞에 배치하세요.
.-label-placement-top레이블을 컨트롤 위에 배치하세요.
.-readonly읽기 전용 상태입니다.
.-required레이블 옆에 필수 입력 표시 별표를 표시하세요.
.-size-largeLarge. -size-lg의 장기형 별칭.
.-size-lg크게(Large).
.-size-sm작음(Small).
.-size-small작음(Small). -size-sm의 장기형 별칭.
.-variant-toggle상자를 대신해 스위치로 렌더링합니다.

부분 ​

부분설명
.asterisk필수 입력 표시 별표입니다.

의사 요소 ​

의사 요소설명
::after-variant-toggle에서 핸들을 따라가는 상태 기호: 끔일 때 X, 켜짐일 때 체크입니다.
::before상자 중앙에 마스킹된 체크나 대시 기호; -variant-toggle에서는 대신 슬라이딩 핸들이 됩니다.

상태 ​

상태설명
:checked—
:disabled—
:indeterminate—

사용자 정의 속성 ​

속성타입기본설명
--pantoken-cb-glyph<url>—상자의 마스크 기호: 선택 시 체크, 불확정(indeterminate)일 때는 대시입니다.
--pantoken-toggle-bw<length>—토글 테두리 두께입니다.
--pantoken-toggle-h<length>—토글 스위치 높이입니다.
--pantoken-toggle-handle<length>—계산된 핸들 지름입니다.
--pantoken-toggle-inset<length>—트랙 가장자리에서 핸들의 안쪽 여백입니다.
--pantoken-toggle-w<length>—토글 트랙 너비입니다.

사용된 토큰 ​

Token타입값
--instui-border-width-sm<length>0.0625rem
--instui-color-background-muted<color>LightDarklight-dark(#F2F4F5, #273540)
--instui-color-stroke-base<color>LightDarklight-dark(#8D959F, #6A7883)
--instui-color-text-muted<color>LightDarklight-dark(#576773, #AAB0B5)
--instui-component-checkbox-asterisk-color<color>LightDarklight-dark(#CF1F24, #FA917F)
--instui-component-checkbox-background-checked-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-checkbox-background-color<color>LightDarklight-dark(#ffffff, #171B21)
--instui-component-checkbox-background-disabled-color<color>LightDarklight-dark(#E8EAEC, #334450)
--instui-component-checkbox-background-hover-color<color>LightDarklight-dark(#ffffff, #171B21)
--instui-component-checkbox-background-readonly-color<color>LightDarklight-dark(#C7CACD, #6A7883)
--instui-component-checkbox-border-checked-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-checkbox-border-color<color>LightDarklight-dark(#7E8792, #5F6E7A)
--instui-component-checkbox-border-disabled-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-checkbox-border-hover-color<color>LightDarklight-dark(#334450, #7E8792)
--instui-component-checkbox-border-radius<length>0.25rem
--instui-component-checkbox-border-readonly-color<color>#8D959F
--instui-component-checkbox-border-width<length>0.0625rem
--instui-component-checkbox-control-size-lg<length>1.5rem
--instui-component-checkbox-control-size-md<length>1.5rem
--instui-component-checkbox-control-size-sm<length>1.5rem
--instui-component-checkbox-control-vertical-margin<length>0rem
--instui-component-checkbox-error-border-color<color>LightDarklight-dark(#CF1F24, #F56050)
--instui-component-checkbox-error-border-hover-color<color>LightDarklight-dark(#CF1F24, #FE7D6A)
--instui-component-checkbox-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-checkbox-font-size-lg<length>1.25rem
--instui-component-checkbox-font-size-md<length>1rem
--instui-component-checkbox-font-size-sm<length>0.875rem
--instui-component-checkbox-font-weight<integer>400
--instui-component-checkbox-gap<length>0.5rem
--instui-component-checkbox-label-base-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-checkbox-label-disabled-color<color>LightDarklight-dark(#8D959F, #576773)
--instui-component-checkbox-label-hover-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-checkbox-label-readonly-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-checkbox-line-height<percentage>125%
--instui-component-radio-input-toggle-background-success<color>#03893D
--instui-component-radio-input-toggle-handle-text<color>#ffffff
--instui-component-radio-input-toggle-medium-height<length>2.5rem
--instui-icon-check<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E')
--instui-icon-minus<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E')
--instui-icon-x<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E')
--instui-size-choice-control-height-md<length>1.5rem

관련 항목 ​

  • radio — 단일 선택의 대응 요소입니다.