Back to Chakra Ui

Checkmark

apps/www/content/docs/components/checkmark.mdx

0.3.0-beta1.0 KB
Original Source
<ExampleTabs name="checkmark-basic" />

Usage

tsx
import { Checkmark } from "@chakra-ui/react"
tsx
<Checkmark checked />

Examples

Indeterminate

Use the indeterminate prop to show an indeterminate state.

<ExampleTabs name="checkmark-indeterminate" />

States

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

<ExampleTabs name="checkmark-states" />

Variants

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

<ExampleTabs name="checkmark-with-variants" />

Sizes

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

<ExampleTabs name="checkmark-with-sizes" />

Colors

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

<ExampleTabs name="checkmark-with-colors" />

Filled

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

<ExampleTabs name="checkmark-with-filled" />

Props

<PropTable component="Checkmark" part="Checkmark" />