Skip to main content
Search...

Checkers

Utilities for checkbox/radio indicator rendering.

import * as Checkers from '@gentleduck/primitives/checkers'
import * as Checkers from '@gentleduck/primitives/checkers'

Anatomy

const { SvgIndicator, inputStyle, indicatorReady, checkedIndicatorReady } = Checkers.useSvgIndicator({
  indicator: <svg />,
  checkedIndicator: <svg />,
})
const { SvgIndicator, inputStyle, indicatorReady, checkedIndicatorReady } = Checkers.useSvgIndicator({
  indicator: <svg />,
  checkedIndicator: <svg />,
})

Exports

  • Checkers.useSvgIndicator

Example

import { useSvgIndicator } from '@gentleduck/primitives/checkers'
 
function CustomIndicatorInput() {
  const { SvgIndicator, inputStyle } = useSvgIndicator({
    indicator: <svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" /></svg>,
    checkedIndicator: <svg viewBox="0 0 16 16"><path d="M3 8l3 3 7-7" /></svg>,
  })
 
  return (
    <>
      <SvgIndicator />
      <input style={inputStyle} />
    </>
  )
}
import { useSvgIndicator } from '@gentleduck/primitives/checkers'
 
function CustomIndicatorInput() {
  const { SvgIndicator, inputStyle } = useSvgIndicator({
    indicator: <svg viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" /></svg>,
    checkedIndicator: <svg viewBox="0 0 16 16"><path d="M3 8l3 3 7-7" /></svg>,
  })
 
  return (
    <>
      <SvgIndicator />
      <input style={inputStyle} />
    </>
  )
}

API

useSvgIndicator(options)

Builds mini SVG data URIs for unchecked/checked indicators and returns CSS custom-property styles plus hidden render nodes.

OptionTypeDefaultDescription
indicatorReact.ReactNode--SVG-like node for unchecked state
checkedIndicatorReact.ReactNode--SVG-like node for checked state

Returns:

  • inputStyle: React.CSSProperties with --svg-off / --svg-on CSS variables
  • SvgIndicator: hidden renderer component that captures SVG markup for conversion
  • indicatorReady: boolean
  • checkedIndicatorReady: boolean

Styling contract

The hook emits CSS variables so you can style one input with two indicator states.

.checkbox {
  background-image: var(--svg-off);
}
 
.checkbox[data-state='checked'] {
  background-image: var(--svg-on);
}
.checkbox {
  background-image: var(--svg-off);
}
 
.checkbox[data-state='checked'] {
  background-image: var(--svg-on);
}
ArrowDrawer