All components
Checkmark
The standalone checkbox indicator square used by checkbox-style components.
1234567891011121314151617import { Checkmark } from "#components/ui/ark-ui/checkmark.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( <> {/* checked by default — pass checked={false} for the empty box */} <Checkmark variant="solid" size="md" palette={indigoPalette} /> <Checkmark variant="outline" size="md" checked={false} />
{/* composition: asChild forwards everything onto your element */} <Checkmark asChild variant="subtle"> <li /> </Checkmark> </> );}Variants
solid
outline
subtle
plain
inverted
Sizes
xs
sm
md
lg
Install
1npx stylexblocks add checkmarkSource
components/ui/ark-ui/checkmark.tsx
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179import * as stylex from "@stylexjs/stylex";import { ark, type HTMLArkProps } from "@ark-ui/react/factory";import type { StyleOverrideProps } from "#lib/recipe-props.ts";import { colorPalette } from '@stylexblocks/ui/color-palette.stylex.ts'import { colors } from '@stylexblocks/ui/tokens/colors.stylex.ts'import { semanticColors } from '@stylexblocks/ui/semantic-tokens/colors.stylex.ts'import { semanticRadii } from '@stylexblocks/ui/semantic-tokens/radii.stylex.ts'import { sizes } from '@stylexblocks/ui/tokens/sizes.stylex.ts'import { spacing } from '@stylexblocks/ui/tokens/spacing.stylex.ts'
const checkmarkStyles = stylex.create({ base: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, color: colors.white, borderWidth: '1px', borderColor: { default: 'transparent', ':is([data-invalid], [aria-invalid="true"])': semanticColors.borderError, }, borderRadius: semanticRadii.control, outlineWidth: { default: null, ':focus-visible': '1px', }, outlineOffset: { default: null, ':focus-visible': '2px', }, outlineStyle: { default: null, ':focus-visible': 'solid', }, outlineColor: { default: null, ':focus-visible': colorPalette.focusRing, }, opacity: { default: null, ':is(:disabled, [disabled], [data-disabled])': 0.5, }, },})
const checkmarkSizes = stylex.create({ xs: { width: sizes._3, height: sizes._3, }, sm: { width: sizes._3_5, height: sizes._3_5, }, md: { width: sizes._4, height: sizes._4, padding: spacing._0_5, }, lg: { width: sizes._5, height: sizes._5, padding: spacing._0_5, },})
const checkmarkVariants = stylex.create({ solid: { borderColor: { default: semanticColors.borderEmphasized, ':is([data-invalid], [aria-invalid="true"])': semanticColors.borderError, }, }, outline: { borderColor: { default: semanticColors.borderEmphasized, ':is([data-invalid], [aria-invalid="true"])': semanticColors.borderError, }, }, subtle: { backgroundColor: colorPalette.muted, borderColor: { default: colorPalette.emphasized, ':is([data-invalid], [aria-invalid="true"])': semanticColors.borderError, }, }, plain: {}, inverted: { borderColor: { default: semanticColors.border, ':is([data-invalid], [aria-invalid="true"])': semanticColors.borderError, }, color: colorPalette.fg, },})
export type CheckmarkSize = keyof typeof checkmarkSizes
export type CheckmarkVariant = keyof typeof checkmarkVariants
// Checked styling restated locally — the generated recipe expresses checked// state as `:checked`, which only matches real form elements, so it is// applied conditionally from the `checked` prop instead.const checkmarkChecked = stylex.create({ solid: { backgroundColor: colorPalette.solid, borderColor: colorPalette.solid, color: colorPalette.contrast, }, outline: { color: colorPalette.fg, borderColor: colorPalette.solid }, subtle: { color: colorPalette.fg }, plain: { color: colorPalette.fg }, inverted: { color: colorPalette.fg },});
const checkmarkLocal = stylex.create({ iconFill: { width: "100%", height: "100%" },});
function CheckIcon() { return ( <svg viewBox="0 0 12 12" fill="none" aria-hidden="true" {...stylex.props(checkmarkLocal.iconFill)}> <path d="M2.5 6.4 5 8.9l4.5-5.4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> </svg> );}
function cx(a?: string, b?: string) { return b ? (a ? `${a} ${b}` : b) : a;}
export type CheckmarkProps = Omit<HTMLArkProps<"span">, "style"> & StyleOverrideProps & { variant?: CheckmarkVariant; size?: CheckmarkSize; checked?: boolean; };
/** * Checkmark — the standalone checkbox indicator square, composed with Ark's * factory so it stays polymorphic via `asChild`. */export function Checkmark({ variant = "solid", size = "md", checked = true, palette, style, className, children, ...props}: CheckmarkProps) { const sx = stylex.props( palette, checkmarkStyles.base, checkmarkSizes[size], checkmarkVariants[variant], checked && checkmarkChecked[variant], style, ); return ( <ark.span aria-hidden="true" {...props} className={cx(sx.className, className)} style={sx.style} > {checked ? (children ?? <CheckIcon />) : null} </ark.span> );}