Checkbox체크박스

체크박스를 사용하면 사용자가 여러 옵션 중에서 하나 이상을 선택하거나 단일 옵션의 켜기/끄기 상태를 전환할 수 있습니다.

사용법

컴포넌트 가져오기:

import 'mdui/components/checkbox.js';

컴포넌트의 TypeScript 타입 가져오기:

import type { Checkbox } from 'mdui/components/checkbox.js';

사용 예시:

Checkbox

<mdui-checkbox>Checkbox</mdui-checkbox>

예시

선택 상태

체크박스가 선택되면 checked 속성값이 true가 됩니다. checked 속성을 추가하면 체크박스가 기본적으로 선택된 상태가 되도록 할 수 있습니다.

Checkbox

<mdui-checkbox checked>Checkbox</mdui-checkbox>

소스

비활성화 상태

disabled 속성을 추가하면 체크박스를 비활성화할 수 있습니다.

Checkbox

<mdui-checkbox disabled>Checkbox</mdui-checkbox>
<mdui-checkbox disabled checked>Checkbox</mdui-checkbox>

소스

불확정 상태

indeterminate 속성을 추가하면 체크박스가 불확정 상태임을 나타냅니다.

Checkbox

<mdui-checkbox indeterminate>Checkbox</mdui-checkbox>

소스

아이콘

unchecked-icon, checked-icon, indeterminate-icon 속성을 설정하여 각각 미선택, 선택, 불확정 상태일 때 체크박스의 Material Icons 아이콘을 지정할 수 있습니다. unchecked-icon, checked-icon, indeterminate-icon 슬롯을 통해서도 설정할 수 있습니다.

Checkbox

<mdui-checkbox
  unchecked-icon="radio_button_unchecked"
  checked-icon="check_circle"
  indeterminate-icon="playlist_add_check_circle"
>Checkbox</mdui-checkbox>

<mdui-checkbox
  indeterminate
  unchecked-icon="radio_button_unchecked"
  checked-icon="check_circle"
  indeterminate-icon="playlist_add_check_circle"
>Checkbox</mdui-checkbox>

<br/>

<mdui-checkbox>
  <mdui-icon slot="unchecked-icon" name="radio_button_unchecked"></mdui-icon>
  <mdui-icon slot="checked-icon" name="check_circle"></mdui-icon>
  <mdui-icon slot="indeterminate-icon" name="playlist_add_check_circle"></mdui-icon>
  Checkbox
</mdui-checkbox>

<mdui-checkbox indeterminate>
  <mdui-icon slot="unchecked-icon" name="radio_button_unchecked"></mdui-icon>
  <mdui-icon slot="checked-icon" name="check_circle"></mdui-icon>
  <mdui-icon slot="indeterminate-icon" name="playlist_add_check_circle"></mdui-icon>
  Checkbox
</mdui-checkbox>

소스

API

속성

HTML 속성	JavaScript 프로퍼티	유형	기본값
`disabled`	`disabled`	`boolean`	`false`
비활성화할지 여부를 설정합니다.
`checked`	`checked`	`boolean`	`false`
선택됨 여부를 설정합니다.
	`defaultChecked`	`boolean`	`false`
기본 선택 상태입니다. 폼을 재설정할 때 이 상태로 복원됩니다. 이 프로퍼티는 JavaScript 프로퍼티로만 설정할 수 있습니다.
`indeterminate`	`indeterminate`	`boolean`	`false`
불확정(indeterminate) 상태 여부를 설정합니다.
`required`	`required`	`boolean`	`false`
폼 제출 시 이 체크박스가 필수인지 여부를 설정합니다.
`form`	`form`	`string`	-
연결된 `<form>` 요소입니다. 이 속성 값은 동일한 페이지에 있는 `<form>` 요소의 `id`여야 합니다. 이 속성을 지정하지 않으면 이 요소는 `<form>` 요소의 자식 요소여야 합니다. 이 속성을 사용하면 요소를 `<form>` 요소의 자식뿐만 아니라 페이지의 어느 곳에나 배치할 수 있습니다.
`name`	`name`	`string`	`''`
체크박스 이름이며, 폼 데이터와 함께 제출됩니다.
`value`	`value`	`string`	`'on'`
체크박스의 값이며, 폼 데이터와 함께 제출됩니다.
`unchecked-icon`	`uncheckedIcon`	`string`	-
선택되지 않은 상태의 Material Icons 아이콘 이름입니다. `slot="unchecked-icon"`을 통해서도 설정할 수 있습니다.
`checked-icon`	`checkedIcon`	`string`	-
선택됨 상태의 Material Icons 아이콘 이름입니다. `slot="checked-icon"`을 통해서도 설정할 수 있습니다.
`indeterminate-icon`	`indeterminateIcon`	`string`	-
불확정 상태의 Material Icons 아이콘 이름입니다. `slot="indeterminate-icon"`을 통해서도 설정할 수 있습니다.
	`validity`	`ValidityState`	-
폼 유효성 검사 상태 객체입니다. 자세한 내용은 `ValidityState`를 참조하십시오.
	`validationMessage`	`string`	-
폼 유효성 검사를 통과하지 못하면 오류 메시지가 포함되고, 통과하면 빈 문자열입니다.
`autofocus`	`autofocus`	`boolean`	`false`
페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
`tabindex`	`tabIndex`	`number`	-
Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.

메서드

이름	매개변수	반환값
`checkValidity`		`boolean`
폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 `false`를 반환하고 `invalid` 이벤트를 트리거합니다. 통과하면 `true`를 반환합니다.
`reportValidity`		`boolean`
폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 `false`를 반환하고 `invalid` 이벤트를 트리거합니다. 통과하면 `true`를 반환합니다. 유효성 검사를 통과하지 못하면 컴포넌트에 유효성 검사 실패 메시지가 표시됩니다.
`setCustomValidity`	`message: string`	`void`
사용자 정의 오류 메시지 텍스트를 설정합니다. 이 텍스트가 비어 있지 않으면 필드가 유효성 검사를 통과하지 못했음을 나타냅니다.
`click`		`void`
마우스 클릭을 시뮬레이션합니다.
`focus`	`options: FocusOptions` (선택사항)	`void`
현재 요소에 포커스를 설정합니다. 객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다: `preventScroll`: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 `true`로 설정하십시오.
`blur`		`void`
현재 요소에서 포커스를 제거합니다.

이벤트

이름
`focus`
포커스를 얻었을 때 발생합니다.
`blur`
포커스를 잃었을 때 발생합니다.
`change`
선택 상태가 변경될 때 발생합니다.
`input`
선택 상태가 변경될 때 발생합니다.
`invalid`
폼 필드 유효성 검사를 통과하지 못했을 때 발생합니다.

Slots

이름
기본
체크박스 텍스트
`unchecked-icon`
선택되지 않은 상태의 아이콘
`checked-icon`
선택됨 상태의 아이콘
`indeterminate-icon`
불확정 상태의 아이콘

CSS Parts

이름
`control`
왼쪽 아이콘 컨테이너
`unchecked-icon`
선택되지 않은 상태의 아이콘
`checked-icon`
선택됨 상태의 아이콘
`indeterminate-icon`
불확정 상태의 아이콘
`label`
체크박스 텍스트

이전 장

Card 카드

다음 장

Chip 칩