Checkmark

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

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

export default function CheckmarkBasic() {
  return (
    <Stack align="flex-start">
      <Checkmark />
      <Checkmark checked />
      <Checkmark indeterminate />
      <Checkmark disabled />
      <Checkmark checked disabled />
      <Checkmark indeterminate disabled />
    </Stack>
  );
}

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.

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

export default function CheckmarkIndeterminate() {
  return (
    <HStack gap="4">
      <Checkmark />
      <Checkmark checked />
      <Checkmark indeterminate />
    </HStack>
  );
}

States

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

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

export default function CheckmarkStates() {
  return (
    <HStack gap="3">
      <Checkmark />
      <Checkmark checked />
      <Checkmark indeterminate />
      <Checkmark disabled />
      <Checkmark checked disabled />
      <Checkmark indeterminate disabled />
    </HStack>
  );
}

Variants

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

import { Checkmark, HStack } from "chakra-ui-solid";
import { For } from "solid-js";

export default function CheckmarkWithVariants() {
  return (
    <HStack gap="4">
      <For each={["solid", "outline", "subtle", "plain", "inverted"] as const}>
        {(variant) => <Checkmark variant={variant} checked />}
      </For>
    </HStack>
  );
}

Sizes

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

import { Checkmark, HStack } from "chakra-ui-solid";
import { For } from "solid-js";

export default function CheckmarkWithSizes() {
  return (
    <HStack gap="4" align="center">
      <For each={["xs", "sm", "md", "lg"] as const}>
        {(size) => <Checkmark size={size} checked />}
      </For>
    </HStack>
  );
}

Colors

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

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

/**
 * The ten palettes written out, where the React version maps over a list.
 *
 * `colorPalette` is deliberately absent from the preset's `staticCss` — see the comment on it in
 * `packages/panda-preset/src/preset.ts` — so its rules come from Panda reading this file. A palette
 * it can only know at runtime reaches the element as a class with no rule, and every checkmark here
 * paints in the default colour with nothing to say so (`CLAUDE.md`, *The hazard*). The sizes and
 * variants on the pages either side of this one are safe to loop over for the opposite reason: a
 * recipe's variant values *are* pre-generated, all 488 of them.
 */
export default function CheckmarkWithColors() {
  return (
    <HStack gap="4" wrap="wrap">
      <Checkmark colorPalette="gray" checked />
      <Checkmark colorPalette="red" checked />
      <Checkmark colorPalette="green" checked />
      <Checkmark colorPalette="blue" checked />
      <Checkmark colorPalette="teal" checked />
      <Checkmark colorPalette="pink" checked />
      <Checkmark colorPalette="purple" checked />
      <Checkmark colorPalette="cyan" checked />
      <Checkmark colorPalette="orange" checked />
      <Checkmark colorPalette="yellow" checked />
    </HStack>
  );
}

Filled

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

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

export default function CheckmarkWithFilled() {
  return <Checkmark variant="outline" filled />;
}

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'>` 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'>` 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 everything it inherits — 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.