import { Checkmark, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack>
<Checkmark />
<Checkmark checked />
<Checkmark indeterminate />
<Checkmark disabled />
<Checkmark checked disabled />
<Checkmark indeterminate disabled />
</Stack>
)
}
Usage
import { Checkmark } from "@chakra-ui/react"<Checkmark checked />Examples
Indeterminate
Use the indeterminate prop to show an indeterminate state.
import { Checkmark, HStack } from "@chakra-ui/react"
const Demo = () => {
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/react"
const Demo = () => {
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, For, HStack } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap={4}>
<For each={["solid", "outline", "subtle", "plain", "inverted"]}>
{(variant) => <Checkmark key={variant} variant={variant} checked />}
</For>
</HStack>
)
}
Sizes
Use the size prop to change the size of the checkmark.
import { Checkmark, For, HStack } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap={4} alignItems="center">
<For each={["xs", "sm", "md", "lg"]}>
{(size) => <Checkmark key={size} size={size} checked />}
</For>
</HStack>
)
}
Colors
Use the colorPalette prop to change the color scheme of the checkmark.
import { Checkmark, For, HStack } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
const Demo = () => {
return (
<HStack gap={4}>
<For each={colorPalettes}>
{(colorPalette) => (
<Checkmark key={colorPalette} colorPalette={colorPalette} checked />
)}
</For>
</HStack>
)
}
Filled
Use the filled prop with the outline variant to add a background color to
the checkmark.
import { Checkmark } from "@chakra-ui/react"
const Demo = () => {
return <Checkmark variant="outline" filled />
}