체크박스

약관 동의·관심 분야 선택처럼 항목들이 서로 독립적일 때 사용하고, 라벨 전체가 클릭 가능 영역이 되도록 묶어 시각·모바일 사용성을 함께 고려합니다.

체크박스

examples/checkbox/CheckboxDefault.tsx

import { Checkbox } from "@/components/ui/checkbox"

export default function CheckboxDefault() {

선택됨

체크된 상태

examples/checkbox/CheckboxChecked.tsx

import { Checkbox } from "@/components/ui/checkbox"

export default function CheckboxChecked() {

설명 포함

이용약관에 동의합니다.

필수 항목입니다.

개인정보 수집·이용에 동의합니다.

서비스 제공을 위해 필요합니다.

examples/checkbox/CheckboxWithDescription.tsx

import { Checkbox } from "@/components/ui/checkbox"

export default function CheckboxWithDescription() {

크기

사이즈 : medium

사이즈 : large

examples/checkbox/CheckboxSize.tsx

import { Checkbox } from "@/components/ui/checkbox"

export default function CheckboxSize() {

비활성화

비활성 체크박스

examples/checkbox/CheckboxDisabled.tsx

import { Checkbox } from "@/components/ui/checkbox"

export default function CheckboxDisabled() {

선택된 비활성화

비활성 (체크됨)

examples/checkbox/CheckboxCheckedDisabled.tsx

import { Checkbox } from "@/components/ui/checkbox"

export default function CheckboxCheckedDisabled() {

중간 상태

전체 동의

전기 사용 동의

가스 사용 동의

수도 사용 동의

examples/checkbox/CheckboxIndeterminate.tsx

"use client"

import * as React from "react"

그룹

공지사항 알림

민원 처리 결과 알림

이벤트 안내

examples/checkbox/CheckboxGroup.tsx

import { Checkbox, CheckboxGroup as KrdsCheckboxGroup } from "@/components/ui/checkbox"

export default function CheckboxGroup() {

그룹 세로 배치

공지사항 알림

새 공지가 등록되면 알려드립니다.

민원 처리 결과 알림

민원 상태가 변경될 때 알려드립니다.

이벤트 안내

신규 이벤트 정보를 받아보세요.

examples/checkbox/CheckboxGroupColumn.tsx

import { Checkbox, CheckboxGroup as KrdsCheckboxGroup } from "@/components/ui/checkbox"

export default function CheckboxGroupColumn() {

칩 변형

examples/checkbox/CheckboxChip.tsx

import { CheckboxChip as KrdsCheckboxChip, CheckboxGroup as KrdsCheckboxGroup } from "@/components/ui/checkbox"

export default function CheckboxChip() {

속성

이름	타입	기본값	설명
aria-label	string	—	Defines a string value that labels the current element. @see aria-labelledby.
className	string	—	—
defaultValue	boolean	—	—
description	string	—	—
disabled	boolean	—	—
id	string	—	—
indeterminate	boolean	—	—
label	string	—	—
onChange	((checked: boolean) => void)	—	—
onClick	MouseEventHandler<HTMLInputElement>	—	—
size	enum	medium	—
style	CSSProperties	—	—
tabIndex	number	—	—
value	string	—	—

사용 지침

예제

기본

선택됨