YA Checkbox

The YaCheckbox is a versatile form control in the YaVendio Design System. It supports multiple types (default, description, outlined), indeterminate state, destructive styling, and flexible positioning.

Quick Start

pnpm dlx shadcn@latest add @yavendio/ya-checkbox

npx shadcn@latest add @yavendio/ya-checkbox

yarn dlx shadcn@latest add @yavendio/ya-checkbox

import { YaCheckbox } from '@/components/ui/ya-checkbox'

export default function Example() {
  const [checked, setChecked] = React.useState(false)

  return (
    <YaCheckbox
      checked={checked}
      onCheckedChange={setChecked}
      label="Accept terms and conditions"
    />
  )
}

Types

YaCheckbox comes with three visual types for different use cases.

Default type

Description typeAdditional context for the user

Outlined typeCard-style container

Type	Description	Features
`default`	Simple checkbox with label	Compact, label only
`description`	Checkbox with label and description	Label + muted description below
`outlined`	Card-like container with border	Border, shadow, label + description

<YaCheckbox type="default" label="Default type" />
<YaCheckbox
  type="description"
  label="Description type"
  description="Additional context for the user"
/>
<YaCheckbox
  type="outlined"
  label="Outlined type"
  description="Card-style container"
/>

States

All States Overview

Checked State

Checked checkbox

<YaCheckbox label="Checked checkbox" checked={true} onCheckedChange={() => {}} />

Indeterminate State

The indeterminate state is useful for "select all" checkboxes when some items are selected. Shows a minus (-) icon instead of a checkmark.

Select all items

<YaCheckbox
  label="Select all items"
  indeterminate={true}
  onCheckedChange={handleSelectAll}
/>

Disabled State

Disabled unchecked

Disabled checked

<YaCheckbox label="Disabled unchecked" disabled />
<YaCheckbox label="Disabled checked" disabled checked />

Features: Reduced opacity, no pointer events, aria-disabled attribute.

Destructive State

Use for checkboxes that confirm dangerous actions:

Delete all data permanentlyThis action cannot be undone.

<YaCheckbox
  type="description"
  label="Delete all data permanently"
  description="This action cannot be undone."
  destructive
/>

Positioning

Control the checkbox position relative to the content.

Left positioned

Right positioned

Position	Description
`left`	Checkbox on the left (default)
`right`	Checkbox on the right

<YaCheckbox position="left" label="Left positioned" />
<YaCheckbox position="right" label="Right positioned" />

Examples

Terms and Conditions

I agree to the Terms of ServiceBy checking this box, you agree to our Terms of Service and Privacy Policy.

<YaCheckbox
  type="outlined"
  label="I agree to the Terms of Service"
  description="By checking this box, you agree to our Terms of Service and Privacy Policy."
  checked={agreed}
  onCheckedChange={setAgreed}
/>

Select All with Indeterminate

Select all

Item 1

Item 2

Item 3

'use client'

import { useState } from 'react'
import { YaCheckbox } from '@/components/ui/ya-checkbox'

export default function SelectAllExample() {
  const [items, setItems] = useState([
    { id: 1, label: 'Item 1', checked: false },
    { id: 2, label: 'Item 2', checked: true },
    { id: 3, label: 'Item 3', checked: false },
  ])

  const checkedCount = items.filter((item) => item.checked).length
  const allChecked = checkedCount === items.length
  const someChecked = checkedCount > 0 && !allChecked

  const handleSelectAll = () => {
    setItems(items.map((item) => ({ ...item, checked: !allChecked })))
  }

  return (
    <div className="flex flex-col gap-2">
      <YaCheckbox
        label="Select all"
        checked={allChecked}
        indeterminate={someChecked}
        onCheckedChange={handleSelectAll}
      />
      <div className="ml-6 flex flex-col gap-1">
        {items.map((item) => (
          <YaCheckbox
            key={item.id}
            label={item.label}
            checked={item.checked}
            onCheckedChange={(checked) =>
              setItems(items.map((i) => (i.id === item.id ? { ...i, checked } : i)))
            }
          />
        ))}
      </div>
    </div>
  )
}

Checkbox Group

Notification preferences

Email notifications

SMS notifications

Push notifications

<fieldset>
  <legend className="text-sm font-medium mb-2">Notification preferences</legend>
  <div className="flex flex-col gap-2">
    <YaCheckbox label="Email notifications" />
    <YaCheckbox label="SMS notifications" />
    <YaCheckbox label="Push notifications" />
  </div>
</fieldset>

Props

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Whether the checkbox is checked
`indeterminate`	`boolean`	`false`	Indeterminate state (shows minus icon)
`onCheckedChange`	`(checked: boolean) => void`	-	Callback when checked state changes
`type`	`'default' \| 'description' \| 'outlined'`	`'default'`	Visual type of the checkbox wrapper
`label`	`string`	-	Label text for the checkbox
`description`	`string`	-	Description text (shown for description/outlined types)
`disabled`	`boolean`	`false`	Whether the checkbox is disabled
`destructive`	`boolean`	`false`	Applies destructive (red) styling
`position`	`'left' \| 'right'`	`'left'`	Position of checkbox relative to content
`className`	`string`	-	Additional CSS classes

Extends all standard <input type="checkbox"> HTML attributes.

Accessibility

Best Practices

Do	Don't
Use clear, action-oriented labels	Vague labels like "OK" or "Checkbox"
Use `description` type for complex options	Cram too much info in the label
Use `outlined` type for important choices	Overuse outlined for all checkboxes
Use `indeterminate` for partial selections	Force all-or-nothing in multi-select
Use `destructive` for dangerous actions	Red styling without `destructive` prop

TypeScript

import { type VariantProps } from 'class-variance-authority'
import { yaCheckboxWrapperVariants } from '@/components/ui/ya-checkbox'

type CheckboxType = VariantProps<typeof yaCheckboxWrapperVariants>['type']
type CheckboxPosition = VariantProps<typeof yaCheckboxWrapperVariants>['position']

Colors

Color system & tokens

Usage Guide

General patterns

Installation

Setup instructions