Toggle

Displays a boolean value.

General

The basic Toggle usage.

Type

Differentiate states by color.

With Icons

Show an icon inside the thumb with icon, and a different one when checked with checkedIcon.

Disabled

You can change disabled Toggle with the property disabled.

Get Change

Capture changes in Toggle.

Notification settings

Put the label and what it does on the left and the Toggle on the right, and name each switch with aria-label.

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`
error	mark the field as invalid	`boolean`	-	`false`
errorMessage	message below the toggle	`string`	-	-
icon	icon inside the thumb	`ReactNode`	-	-
checkedIcon	icon when checked, falls back to `icon`	`ReactNode`	-	-
...	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'

Ref

The ref points at the native input.

Accessibility

• The toggle is a switch, reached with Tab and changed with Space, with a visible focus ring.
• Without a visible label, pass aria-label or aria-labelledby.

Edit this page on GitHub