Toggle

Displays a boolean value.

General

The basic Toggle usage.

Preview

See code

Type

Differentiate states by color.

Disabled

You can change disabled Toggle with the property disabled.

Preview

See code

Get Change

Capture changes in Toggle.

Preview

See code

APIs

Toggle.Props

Attribute	Description	Type	Accepted values	Default
checked	checked or not	`boolean`	-	-
initialChecked	checked or not on initial	`boolean`	-	`false`
onChange	change event handler	`ToggleEvent`	-	-
type	current type	`ToggleTypes`	ToggleTypes	`default`
disabled	disable toggle	`boolean`	-	`false`
...	native props	`LabelHTMLAttributes`	`'from', 'name', 'className', ...`	-

ToggleEvent

interface ToggleEventTarget {
  checked: boolean
}

export interface ToggleEvent {
  target: ToggleEventTarget
  stopPropagation: () => void
  preventDefault: () => void
  nativeEvent: React.ChangeEvent
}

ToggleTypes

type ToggleTypes =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'info'

Edit this page on GitHub

Textarea

Tooltip

MADE & DESIGNED WITHBY BRUNO ANDRADE