Checkbox

The TkCheckbox component is another basic element for user input. You can use this to supply a way for the user to toggle an option.

React

import { TkCheckbox } from '@takeoff-ui/react'

Vue

import { TkCheckbox } from '@takeoff-ui/vue'

Angular

import { TkCheckbox } from '@takeoff-ui/angular'

Basic

This demo visualizes the checked, unchecked, and indeterminate states of a checkbox component.

View Code

React

<TkCheckbox label="unchecked" value={false} />
<TkCheckbox label="checked" value={true} />
<TkCheckbox label="indeterminate" indeterminate={true} />

Vue

<TkCheckbox label="unchecked" :value="false" />
<TkCheckbox label="checked" :value="true" />
<TkCheckbox label="indeterminate" :indeterminate="true" />

Angular

<tk-checkbox label="unchecked" [value]="false" />
<tk-checkbox label="checked" [value]="true" />
<tk-checkbox label="indeterminate" [indeterminate]="true" />

State

This demo showcases the disabled and invalid states of the checkbox component.

View Code

React

<TkCheckbox label="Invalid" invalid={true} />
<TkCheckbox label="Disabled" disabled />

Vue

<TkCheckbox label="Invalid" :invalid="true" />
<TkCheckbox label="Disabled" disabled />

Angular

<tk-checkbox label="Invalid" [invalid]="true" />
<tk-checkbox label="Disabled" disabled />

Type

This demo visualizes the different appearances of checkbox with type prop.

View Code

React

<TkCheckbox label="default type" />
<TkCheckbox label="card type" type="card" />

Vue

<TkCheckbox label="default type" />
<TkCheckbox label="card type" type="card" />

Angular

<tk-checkbox label="default type" />
<tk-checkbox label="card type" type="card" />

Label & Description

This demo visualizes the description sub text.

View Code

React

<TkCheckbox description="example description" />

Vue

<TkCheckbox description="example description" />

Angular

<tk-checkbox description="example description" />

Content Slot

This demo illustrates the custom content slots.

Label

View Code

React

<TkCheckbox type="card">
  <div slot="content" className="flex items-center gap-2">
    <div>Label</div>
    <TkBadge icon="info" variant="info" label="İnformation" size="small" />
  </div>
</TkCheckbox>

Vue

<TkCheckbox type="card">
  <div slot="content" className="flex items-center gap-2">
    <div>Label</div>
    <TkBadge icon="info" variant="info" label="İnformation" size="small" />
  </div>
</TkCheckbox>

Angular

<tk-checkbox type="card">
  <div slot="content" class="flex items-center gap-2">
    <div>Label</div>
    <tk-badge icon="info" variant="info" label="İnformation" size="small" />
  </div>
</tk-checkbox>

API

Props

Name	Type	Default	Description
	string	null	The description sub text displayed.
	boolean	false	If true, the user cannot interact with the checkbox.
	boolean	false	If true, the checkbox will be indeterminate.
	boolean	false	Indicates whether the input is in an invalid state
	string	null	Defines the label for the checkbox.
	string	null	Name of the checkbox
	"card", "default"	'default'	Determines the appearance types of the checkbox.
	boolean	false	Sets the checkbox value

Events

Name	Description
tk-change	Emitted when the checkbox checked state changes.

Slots

Name	Description
content	Custom content template.