Checkbox

Checkbox (체크박스)

출처: 문서

본문

Checkbox

여러 개를 선택할 수 있는 옵션 그룹이에요.

WARNING label을 값으로 사용하는 것은 더 이상 사용되지 않으며(Deprecated), label은 표시 텍스트로만 사용돼요. 이 동작은 3.0.0에서 제거될 예정이에요. 새 API로 전환하는 것을 고려해 주세요.

TIP 새 API value는 2.6.0에 추가됐어요. 문서의 예시는 모두 value를 사용해요. 2.6.0보다 낮은 버전을 사용하면서 checkbox-group을 사용한다면 다음을 참고해 주세요.

기본 사용법

Checkbox를 단독으로 사용해서 두 상태 사이를 전환할 수 있어요. el-checkbox에 v-model(바인딩 변수)을 정의해요. 단일 체크박스의 기본값은 Boolean이며, 선택되면 true가 돼요. el-checkbox 태그 안의 내용은 체크박스 버튼 뒤의 설명이 돼요.

import { ref } from 'vue'

const checked1 = ref(true)
const checked2 = ref(false)
const checked3 = ref(false)
const checked4 = ref(false)
const checked5 = ref(false)
const checked6 = ref(false)

비활성화 상태

체크박스의 비활성화 상태예요. disabled 속성을 설정해요.

Checkbox group

하나의 그룹에 바인딩된 여러 체크박스에 사용되며, 체크 여부를 통해 한 옵션이 선택되었는지 나타내요. checkbox-group 요소는 Array로 바인딩되는 v-model을 사용해서 하나의 그룹 안에서 여러 체크박스를 관리할 수 있어요. el-checkbox 요소 안에서 value는 체크박스의 값이에요. 태그 안에 내용이 없으면 label이 체크박스 버튼 뒤의 설명으로 렌더링돼요. value는 배열의 요소 값과도 대응해요. 지정된 값이 배열에 존재하면 선택되고, 그 반대도 마찬가지예요.

Options 속성 2.11.2

기본 el-checkbox-group 사용법의 단축형이에요. props 속성을 통해 options의 별칭을 커스터마이즈할 수 있어요.

Indeterminate (불확정)

indeterminate 속성은 '전체 선택' 효과를 구현하는 데 도움을 줘요.

최소 / 최대 선택 항목

min과 max 속성은 선택된 항목 수를 제한하는 데 도움을 줘요.

버튼 스타일

버튼 스타일의 Checkbox예요. el-checkbox 요소를 el-checkbox-button 요소로 바꾸면 돼요. size 속성도 제공돼요.

import { ref } from 'vue'

const checkboxGroup1 = ref(['Shanghai'])
const checkboxGroup2 = ref(['Shanghai'])
const checkboxGroup3 = ref(['Shanghai'])
const checkboxGroup4 = ref(['Shanghai'])
const cities = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']

.demo-button-style {
  margin-top: 24px;
}

테두리와 함께

border 속성이 Checkbox에 테두리를 추가해요.

import { ref } from 'vue'

const checked1 = ref(true)
const checked2 = ref(false)
const checked3 = ref(false)
const checked4 = ref(true)
const checkboxGroup1 = ref(['Value1'])

Checkbox API

Checkbox Attributes

Checkbox Events

Checkbox Slots

CheckboxGroup API

CheckboxGroup Attributes

CheckboxGroup Events

CheckboxGroup Slots

CheckboxButton API

CheckboxButton Attributes

CheckboxButton Slots

더 알아보기 (Learn more)