Checkmark

체크, 미체크, 그리고 불확정(indeterminate) 상태를 시각적으로 표시하는 데 사용하는 컴포넌트예요. Checkmark 하나로 여러 상태를 한눈에 알려줄 수 있어요.

출처: 문서

본문

import { Checkmark } from "@chakra-ui/react"

<Checkmark checked />

indeterminate prop을 사용하면 불확정 상태를 표시할 수 있어요.

Checkmark 컴포넌트는 세 가지 상태를 지원해요: 미체크(기본값), 체크, 그리고 불확정(indeterminate).

variant prop을 사용하면 체크마크의 시각적 스타일을 바꿀 수 있어요.

size prop을 사용하면 체크마크의 크기를 바꿀 수 있어요.

colorPalette prop을 사용하면 체크마크의 색상 구성표를 바꿀 수 있어요.

filled prop을 outline variant와 함께 사용하면 체크마크에 배경색을 추가할 수 있어요.

해당 컴포넌트에 전달할 수 있는 prop은 Checkmark 컴포넌트의 Props 표를 확인해 주세요.

Chakra UI의 Checkmark 컴포넌트에 대해 더 자세히 알아보려면 공식 문서를 확인해 보세요.