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'

Basic

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

View Code

React

<TkToggle />

Vue

<TkToggle />

Angular

<tk-toggle />

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 :value="true" />
<TkToggle label="Invalid" invalid :value="true" />

Angular

<tk-toggle label="Disabled" disabled value="true" />
<tk-toggle label="Invalid" invalid 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.
	string	''	The ID of the input element.
	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.
	"info", "success"	'info'	The type of the toggle.

Events

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

Methods

Name	Description
getInputElement	Returns the native <input> element used under the hood.