Checkbox

Checkbox with label, description text, error state, and three sizes.

Preview

ONE GOOD STEP AT A TIME

A launch worth checking off.

2 of 4 complete50%

Set the foundationColors, type, and spacing feel like your product.Make the components yoursThe small details work beautifully together.Leave no one behindEvery interaction works with a keyboard.Share it with the worldYour next great idea is ready to meet people.

A lighter touch.

Keep me in the loopOccasional updates from your team.

SmallMediumLarge

Import

import { Checkbox } from '@velocityuikit/velocityui'

Props

Prop	Type	Default	Description
variant	`'default' \| 'card'`	`'default'`	Use card for a full clickable selection surface with a checked outline. Works with native checked/defaultChecked and form behavior.
label	`string`	—	Label text rendered beside the checkbox.
description	`string`	—	Helper text rendered below the label.
error	`string`	—	Error message rendered below. Sets aria-invalid.
size	`'sm' \| 'md' \| 'lg'`	`'md'`	Controls the checkbox and label size.
checked	`boolean`	—	Controlled checked state.
defaultChecked	`boolean`	—	Uncontrolled default checked state.
disabled	`boolean`	`false`	Disables the checkbox.

Examples

Basic

import { Checkbox } from '@velocityuikit/velocityui'

export default function Example() {
  return <Checkbox label="Accept terms and conditions" />
}

With description

import { Checkbox } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <Checkbox
      label="Email notifications"
      description="Receive updates about your account activity."
      defaultChecked
    />
  )
}

Sizes

import { Checkbox } from '@velocityuikit/velocityui'

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
      <Checkbox size="sm" label="Small" defaultChecked />
      <Checkbox size="md" label="Medium" defaultChecked />
      <Checkbox size="lg" label="Large" defaultChecked />
    </div>
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  dark-cyan  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */