import { Checkmark, HStack } from '@chakra-ui/react'
export const CheckmarkBasic = () => {
return (
<HStack gap="4">
<Checkmark />
<Checkmark checked />
<Checkmark indeterminate />
</HStack>
)
}
Anatomy
import { Checkmark } from '@chakra-ui/react'<Checkmark checked />Usage
Checkmark is the presentational box used inside
Checkbox and
Checkbox Card. It renders an svg and has no
behavior of its own — it does not toggle, and it is not focusable.
Reach for it when you need the look of a checkbox without the interaction, for
example in a list of selected items, a pricing feature table, or inside a custom
control where you manage state yourself. For anything a user can toggle, use
Checkbox instead, so you get the input, label association and keyboard
handling.
Examples
States
The component supports three states — unchecked (default), checked and
indeterminate — each of which can be combined with disabled.
Default
Disabled
import { Checkmark, HStack, Stack, Text } from '@chakra-ui/react'
export const CheckmarkStates = () => {
return (
<Stack gap="4">
<HStack gap="4">
<Text textStyle="sm" color="fg.muted" width="20">
Default
</Text>
<Checkmark />
<Checkmark checked />
<Checkmark indeterminate />
</HStack>
<HStack gap="4">
<Text textStyle="sm" color="fg.muted" width="20">
Disabled
</Text>
<Checkmark disabled />
<Checkmark checked disabled />
<Checkmark indeterminate disabled />
</HStack>
</Stack>
)
}
Variants
Use the variant prop to change the visual style.
import { Checkmark, For, HStack } from '@chakra-ui/react'
export const CheckmarkWithVariants = () => {
return (
<HStack gap="4">
<For each={['solid', 'subtle', 'outline', 'plain', 'inverted'] as const}>
{(variant) => <Checkmark key={variant} variant={variant} checked />}
</For>
</HStack>
)
}
Sizes
Use the size prop to change the size.
import { Checkmark, For, HStack } from '@chakra-ui/react'
export const CheckmarkWithSizes = () => {
return (
<HStack gap="4" alignItems="center">
<For each={['xs', 'sm', 'md', 'lg'] as const}>
{(size) => <Checkmark key={size} size={size} checked />}
</For>
</HStack>
)
}
Colors
Use the colorPalette prop to change the color scheme.
import { Checkmark, For, HStack } from '@chakra-ui/react'
import { colorPalettes } from '#lib/color-palettes'
export const CheckmarkWithColors = () => {
return (
<HStack gap="4" wrap="wrap">
<For each={colorPalettes}>
{(colorPalette) => (
<Checkmark key={colorPalette} colorPalette={colorPalette} checked />
)}
</For>
</HStack>
)
}
Props
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'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 | booleanWhether the checkmark is checked | |
indeterminate | booleanWhether the checkmark is indeterminate | |
disabled | booleanWhether the checkmark is disabled |