Checkbox

Components/Input and selection

ImplementationHTML/CSS/JSArk/ZagReact · shadcn/Base UIAngular

Standalone component with a native checkbox, indeterminate state, and ControlValueAccessor integration with Angular Forms.

DesignUsageImplementationAccessibility

Documentation sectionDesignUsageImplementationAccessibility

Design

Functional preview

Running with the native Angular component and HTML checkbox + Angular Forms.

Loading functional preview…

Open the Angular playground

Anatomy

Option label 1 2 3 4

1 Label (.ds-checkbox-label) — wraps checkbox + text, extends click target.
2 Input (.ds-checkbox) — styled native <input type="checkbox">.
3 Checkmark — CSS pseudo-element, visible when checked.
4 Indeterminate dash — CSS pseudo-element, visible when indeterminate = true.

Default

Unchecked Checked

Indeterminate

Select all

Sizes

Small (16px) Medium (20px, default) Large (24px)

Error Group

Select at least one option

Option A Option B Please select at least one option.

Disabled

Disabled unchecked Disabled checked

States

State	CSS trigger	Visual change	Token
Unchecked	---	Neutral box fill and border	component.checkbox.box.fill.unchecked.default, component.checkbox.box.border-color.unchecked.default
Unchecked hover	:hover	Darker neutral box border/fill	component.checkbox.box.fill.unchecked.hover, component.checkbox.box.border-color.unchecked.hover
Checked	:checked	Primary box fill with checkmark	component.checkbox.box.fill.checked.default, component.checkbox.mark.fill.checked.default
Checked hover	:checked:hover	Darker primary box fill	component.checkbox.box.fill.checked.hover, component.checkbox.mark.fill.checked.hover
Indeterminate	:indeterminate	Primary box fill with indeterminate mark	component.checkbox.box.fill.indeterminate.default, component.checkbox.mark.fill.indeterminate.default
Focus	:focus-visible	2px outline ring	component.checkbox.focus-ring.radius.default + component.focus-ring.*
Error group	.ds-checkbox-group--error	Error border on controls and message below group	component.checkbox.box.border-color.unchecked.error, semantic.feedback.error.content-default
Disabled	[disabled]	Muted box, mark and label	component.checkbox.box.fill.*.disabled, semantic.content.disabled

Figma properties

Property	Type	Default	Description
Show Label	Boolean	true	Shows or hides the control label
Label	Text	"Rótulo"	Label text (label/md)
Show Description	Boolean	false	Shows descriptive text below the label
Description	Text	"Texto descritivo"	Multiline description text (body/sm)
Show Helper Text	Boolean	false	Shows helper text below the description
Helper Text	Text	"Texto auxiliar"	Caption/sm annotation (content/secondary)

Usage

When to use

• Zero, one, or multiple independent options may be selected.
• A binary option has a visible label and will be confirmed in a form.

When not to use

• Only one option in a group may be selected; use Radio.
• The change immediately turns a setting on or off; use Toggle.

When to choose this output

Choose this native Angular output when the application already uses Angular. It consumes the same DS CSS and has no dependency on the Web runtime or React adapters.

Implementation

Status

Beta

Distribution

Validated Angular tarball

Installation

npm

npm install ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

pnpm

pnpm add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

yarn

yarn add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

bun

bun add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

Validated workspace beta

The command installs the locally generated and consumer-tested tarball. @tis/angular is not published on the public npm registry.

DS styles

@import "ds-tis/css";

Angular imports

import { FormsModule } from '@angular/forms'
import { TisCheckbox } from '@tis/angular/checkbox'

Template

<tis-checkbox
  name="notifications"
  [(ngModel)]="notifications"
  description="Receba um resumo semanal por e-mail."
>
  Receber novidades
</tis-checkbox>

Public contract

Package

@tis/angular

Entrypoint

@tis/angular/checkbox

Primitive

HTML checkbox + Angular Forms

Status

Beta

Accessibility

Keyboard interaction

Key	Action
Tab	Moves focus to the next checkbox
Space	Toggles the checked state

Accessibility

WCAG criterion	Requirement	Status
1.3.1 Info and Relationships (A)	Group related checkboxes in <fieldset> + <legend>	✓
2.4.11 Focus Appearance (AA)	Focus ring visible via :focus-visible	✓
2.5.8 Target Size min (AA)	Label extends click target beyond the checkbox itself	✓
4.1.2 Name, Role, Value (A)	Native <input type="checkbox"> provides role + state automatically	✓
3.3.1 Error Identification (A)	Group error communicated via ds-checkbox-group--error	✓

Implementation notes

Uses native <input type="checkbox"> for built-in keyboard and screen reader support. The indeterminate state must be set via JavaScript (el.indeterminate = true). Always wrap related checkboxes in a <fieldset> with a <legend> to provide group context to assistive technology.

Invisible label — requires explicit ARIA

When Show Label = false and Show Description = true, link the <input> to the description via aria-labelledby="description-id". If neither is visible, use aria-label directly on the <input>. Helper Text should always be linked via aria-describedby="helper-id".

Output responsibility

Preserve native checkbox semantics and validate Space, checked and indeterminate states, disabled and invalid states, visible focus, and Angular Forms integration.

Validation evidence

Covered by its independent Storybook output plus browser, responsive, keyboard, Axe, and bundle checks.

Open the stable reference