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:

Hint:

Error:

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" />

Hint And Error

Use the hint prop to show supporting text below the toggle. When invalid is true, the error prop is displayed instead of the hint.

View Code

React

<TkToggle label="Email notifications" hint="Recommended for account updates" />
<TkToggle label="Two-factor authentication" invalid error="This setting requires verification" value={true} />

Vue

<TkToggle label="Email notifications" hint="Recommended for account updates" />
<TkToggle label="Two-factor authentication" :invalid="true" error="This setting requires verification" :value="true" />

Angular

<tk-toggle label="Email notifications" hint="Recommended for account updates"></tk-toggle>
<tk-toggle label="Two-factor authentication" [invalid]="true" error="This setting requires verification" [value]="true"></tk-toggle>

API

Props

Name	Type	Default	Description
	string	null	The aria-labelledby attribute of the toggle.
	string	null	Sets the data-testid attribute on the root container element.
	boolean	false	Whether the toggle is disabled.
	string	null	This is the error message that will be displayed.
	string	null	Provides a hint or additional information about the toggle.
	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.

Slots

Name	Description
	The default slot