Checkmark

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

Usage

import { Checkmark } from "chakra-ui-solid";

<Checkmark checked />

Checkmark is the mark, not the control. It has no input behind it and nothing to click — a Checkbox supplies the state and the label, and this is what it draws inside.

Examples

Indeterminate

Use the indeterminate prop to show an indeterminate state.

States

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

Variants

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

Sizes

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

Colors

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

Filled

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

Props

CheckmarkProps
Prop	Default	Type
`checked`	—	`boolean` Whether the checkmark is checked.
`disabled`	—	`boolean` Whether the checkmark is disabled — dims it and takes the cursor with it.
`filled`	—	`ConditionalValue<boolean>` Give the box an opaque background, so it covers whatever it sits on rather than letting it through. Meant for `variant="outline"`, which otherwise has no fill of its own.
`indeterminate`	—	`boolean` Whether the checkmark is indeterminate. Beats `checked` when both are set, as Chakra's does.
`size`	`'md'`	`ConditionalValue<'xs' \| 'sm' \| 'md' \| 'lg' \| PresetVariant<'checkmark', 'size'>>` The box's size, as a scale step. `md` and `lg` inset the glyph with a little padding; `xs` and `sm` are too small to spare it.
`variant`	`'solid'`	`ConditionalValue<'solid' \| 'outline' \| 'subtle' \| 'plain' \| 'inverted' \| PresetVariant<'checkmark', 'variant'>>` How the box is painted once it is checked — `solid` fills it with the palette, `outline` and `inverted` only recolour the border, `subtle` tints it, and `plain` draws no box at all.

Plus HTMLChakraProps<"svg"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.