Checkmark

A customizable indicator used to show a checked or indeterminate state.

Usage

A visual indicator that represents a checked, unchecked, or indeterminate state. It is commonly used as part of checkboxes, radio buttons, or selection lists.

import { Checkmark, Icon } from "@elemnts-ui/react"

<Checkmark checked>
  <Icon icon="tabler:check" />
</Checkmark>

Variants

Change the visual style of the checkmark

Sizes

Change the size of the checkmark

Indeterminate State

Use the indeterminate prop and provide a fallback element to show a different indicator (e.g., a minus sign) when the state is neither checked nor unchecked.

API Reference

The component is a styled div and accepts all standard HTML div props in addition to the following:

Prop	Type	Default
checked	`boolean`	`false`
indeterminate	`boolean`	`false`
disabled	`boolean`	`false`
fallback	`ReactNode`	-
size	`xs` \| `sm` \| `md` \| `lg` \| `xl`	`md`
variant	`primary` \| `secondary` \| `tertiary` \| `ghost`	`'primary'`