Checkbox Stable WINMACLNX

A controlled checkbox with an optional label. Built entirely from VeloxKit primitives — no native widget.

Import

import { Checkbox } from 'veloxkit'

Basic usage

const [agreed, setAgreed] = useState(false)
 
<Checkbox
  checked={agreed}
  onChange={setAgreed}
  label="I agree to the terms"
/>

Props

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Current checked state
`onChange`	`(value: boolean) => void`	—	Called with the new state on press
`label`	`string`	—	Optional text label rendered to the right
`disabled`	`boolean`	`false`	Prevents interaction
`style`	`ViewStyle`	—	Outer container style override

Examples

Settings form

const [settings, setSettings] = useState({
  notifications: true,
  analytics:     false,
  autoUpdate:    true,
})
 
const toggle = (key: keyof typeof settings) =>
  setSettings(s => ({ ...s, [key]: !s[key] }))
 
return (
  <View style={{ gap: 12 }}>
    <Checkbox
      checked={settings.notifications}
      onChange={() => toggle('notifications')}
      label="Enable notifications"
    />
    <Checkbox
      checked={settings.analytics}
      onChange={() => toggle('analytics')}
      label="Send usage analytics"
    />
    <Checkbox
      checked={settings.autoUpdate}
      onChange={() => toggle('autoUpdate')}
      label="Auto-update on launch"
    />
  </View>
)

Indeterminate (select-all pattern)

VeloxKit's Checkbox doesn't have a built-in indeterminate state, but you can implement it with a custom visual:

function SelectAllCheckbox({
  items,
  selectedIds,
  onToggleAll,
}: {
  items: { id: string }[]
  selectedIds: Set<string>
  onToggleAll: () => void
}) {
  const allSelected  = items.every(i => selectedIds.has(i.id))
  const someSelected = items.some(i => selectedIds.has(i.id))
 
  return (
    <Checkbox
      checked={allSelected}
      onChange={onToggleAll}
      label={allSelected ? 'Deselect all' : someSelected ? 'Select all (partial)' : 'Select all'}
    />
  )
}

VirtualizedList Switch