Toggle

Overview

Toggle buttons allow users to switch between alternative states or modes of the same entity. Only one state is shown at a time.

When to use:

  • In forms to let users switch between different options of the setting with dependent subsettings.

Implementation

Edit the code below to see your changes live!

function Example() {
  const [activeTab, setActiveTab] = useState('product');

  const items = [
    { value: 'none', label: 'None' },
    { value: 'product', label: 'Product' },
    { value: 'variant', label: 'Variant' },
  ];

  return (
    <Toggle
      id="toggle-example"
      items={items}
      label="Inventory tracking"
      onChange={setActiveTab}
      value={activeTab}
    />
  );
}

Props

Prop name
Type
Default
Description
idstring

Defines an HTML id attribute to the parent wrapper.

labelstring | FormControlLabel

Adds a label to the toggle.

valueany

Determines the active button by value.

disabledboolean

Disables the Toggle component.

itemsToggleItem[]

See ToggleItem for usage.

onChange(value: string) => void

Function that will get called when a toggle button is clicked.

Props ending with * are required

Do's and Don'ts

Do
Stratch to fit toolbar width
Use option names of similar length
Don't
Use as tabs
Use as filters
Add two lines of content
Use icons that don’t clearly convey the options they represent
Use icon with text