Skip to main content

Pivotal UI

v18.1.0

Toggle

Basic example

The Toggle component takes an onChange callback.

ReferenceError: React is not defined
Toggle checked

Toggles accept a checked prop that turns on the switch. Note that you must handle the addition and removal of the checked property yourself.

ReferenceError: React is not defined
Toggle size

Toggle has a size attribute that takes three options: small, medium (default), and large.

ReferenceError: React is not defined

Props

PropertyRequiredTypeDefaultDescription
classNamenoStringClass name to put on the inner label element
idnoStringThe id of the element
sizenooneOf('small', 'medium', 'large')'medium'Size variations

All other props are passed to the inner input element.

Imports

Import React components (including CSS):

import {Toggle} from 'pivotal-ui/react/toggle';

Import CSS only:

import 'pivotal-ui/css/toggle';