Checkmark

A visual indicator used to show checked, unchecked, or indeterminate states

AI TipWant to skip the docs? Use the MCP Server

Usage

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

<Checkmark checked />

Use the indeterminate prop to show an indeterminate state.

The Checkmark component supports three states: unchecked (default), checked, and indeterminate.

Use the variant prop to change the visual style of the checkmark.

Use the size prop to change the size of the checkmark.

Use the colorPalette prop to change the color scheme of the checkmark.

Use the filled prop with the outline variant to add a background color to the checkmark.

Prop	Default	Type
`colorPalette`	`gray`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`size`	`md`	`'xs' \| 'sm' \| 'md' \| 'lg'` The size of the component
`variant`	`solid`	`'solid' \| 'outline' \| 'subtle' \| 'plain' \| 'inverted'` The variant of the component
`checked`		`boolean \| undefined` Whether the checkmark is checked
`indeterminate`		`boolean \| undefined` Whether the checkmark is indeterminate
`disabled`		`boolean \| undefined` Whether the checkmark is disabled
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.