Toggle

The TkToggle component is another basic element for user input. You can use this for turning settings, features or true/false inputs on and off.

React

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

Vue

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

Angular

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

Playground

Preview

Generated Code

<TkToggle
  label="Toggle me"
  size="base"
  variant="info"
  icon="check"
  showIcon
/>

<TkToggle
  label="Toggle me"
  size="base"
  variant="info"
  icon="check"
  :showIcon.prop="true"
/>

<tk-toggle
  label="Toggle me"
  size="base"
  variant="info"
  icon="check"
  [showIcon]="true"
/>

Controls

Label:

Size:

Variant:

Icon:

Basic

This demo visualizes the checked, unchecked states of a toggle component.

View Code

React

<TkToggle />

Vue

<TkToggle />

Angular

<tk-toggle />

Variant

Use the variant prop to change the color scheme of the toggle.

View Code

React

<TkToggle label="Primary" variant="primary" value={true} showIcon={false} />
<TkToggle label="Secondary" variant="secondary" value={true} showIcon={false} />
<TkToggle label="Neutral" variant="neutral" value={true} showIcon={false} />
<TkToggle label="Info" variant="info" value={true} showIcon={false} />
<TkToggle label="Success" variant="success" value={true} showIcon={false} />
<TkToggle label="Warning" variant="warning" value={true} showIcon={false} />
<TkToggle label="Danger" variant="danger" value={true} showIcon={false} />
<TkToggle label="Verified" variant="verified" value={true} showIcon={false} />
<TkToggle label="Purple" variant="purple" value={true} showIcon={false} />
<TkToggle label="Cyan" variant="cyan" value={true} showIcon={false} />
<TkToggle label="Business" variant="business" value={true} showIcon={false} />
<TkToggle label="Teal" variant="teal" value={true} showIcon={false} />
<TkToggle label="Dark" variant="dark" value={true} showIcon={false} />
<TkToggle label="White" variant="white" value={true} showIcon={false} />

Vue

<TkToggle label="Primary" variant="primary" :value="true" :show-icon="false" />
<TkToggle label="Secondary" variant="secondary" :value="true" :show-icon="false" />
<TkToggle label="Neutral" variant="neutral" :value="true" :show-icon="false" />
<TkToggle label="Info" variant="info" :value="true" :show-icon="false" />
<TkToggle label="Success" variant="success" :value="true" :show-icon="false" />
<TkToggle label="Warning" variant="warning" :value="true" :show-icon="false" />
<TkToggle label="Danger" variant="danger" :value="true" :show-icon="false" />
<TkToggle label="Verified" variant="verified" :value="true" :show-icon="false" />
<TkToggle label="Purple" variant="purple" :value="true" :show-icon="false" />
<TkToggle label="Cyan" variant="cyan" :value="true" :show-icon="false" />
<TkToggle label="Business" variant="business" :value="true" :show-icon="false" />
<TkToggle label="Teal" variant="teal" :value="true" :show-icon="false" />
<TkToggle label="Dark" variant="dark" :value="true" :show-icon="false" />
<TkToggle label="White" variant="white" :value="true" :show-icon="false" />

Angular

<tk-toggle label="Primary" variant="primary" [value]="true" [showIcon]="false" />
<tk-toggle label="Secondary" variant="secondary" [value]="true" [showIcon]="false" />
<tk-toggle label="Neutral" variant="neutral" [value]="true" [showIcon]="false" />
<tk-toggle label="Info" variant="info" [value]="true" [showIcon]="false" />
<tk-toggle label="Success" variant="success" [value]="true" [showIcon]="false" />
<tk-toggle label="Warning" variant="warning" [value]="true" [showIcon]="false" />
<tk-toggle label="Danger" variant="danger" [value]="true" [showIcon]="false" />
<tk-toggle label="Verified" variant="verified" [value]="true" [showIcon]="false" />
<tk-toggle label="Purple" variant="purple" [value]="true" [showIcon]="false" />
<tk-toggle label="Cyan" variant="cyan" [value]="true" [showIcon]="false" />
<tk-toggle label="Business" variant="business" [value]="true" [showIcon]="false" />
<tk-toggle label="Teal" variant="teal" [value]="true" [showIcon]="false" />
<tk-toggle label="Dark" variant="dark" [value]="true" [showIcon]="false" />
<tk-toggle label="White" variant="white" [value]="true" [showIcon]="false" />

States

This example illustrates the disabled state of the toggle.

View Code

React

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

Vue

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

Angular

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

API

Props

Name	Type	Default	Description
	string	null	The aria-labelledby attribute of the toggle.
	boolean	false	Whether the toggle is disabled.
	string	'check'	Specifies a material icon name to be displayed.
	boolean	false	Whether the toggle is in an invalid state.
	string	null	The label for the toggle.
	string	null	The name attribute of the toggle.
	boolean	true	Whether to show the icon in the toggle.
	"base", "large", "small", "xlarge", "xsmall"	'base'	Sets size for the component.
	boolean	false	The current state of the toggle.
	"business", "cyan", "danger", "dark", "info", "neutral", "primary", "purple", "secondary", "success", "teal", "verified", "warning", "white"	'info'	The variant of the toggle.

Events

Name	Description
tk-change	Event emitted when the toggle value changes.

Methods

Name	Type	Description
getInputElement	getInputElement() => Promise<HTMLInputElement>	Returns the native <input> element used under the hood.