1. Components
  2. Toggles

Components

Toggles

A set of buttons that can be toggled between states.

   

Import Toggle

Tremor exports two components to build a Toggle.

import { Toggle, ToggleItem } from "@tremor/react";

Anatomy

How the basic component is pieced together displaying all properties with their default values.

import { Toggle, ToggleItem } from "@tremor/react";

export default () => (
  <Toggle
    defaultValue={undefined}
    value={undefined}
    onValueChange={undefined}
    color="blue"
    marginTop="mt-0"
  >
    <ToggleItem
      value={undefined}
      text=""
      icon={undefined}
    />
  </Toggle>
);

Usage example

The example below shows different toggles created with Toggle and ToggleItem components.

import { Toggle, ToggleItem } from "@tremor/react";
import {
  CheckIcon,
  CollectionIcon,
  ReceiptRefundIcon,
  ViewListIcon,
  ChartPieIcon
} from "@heroicons/react/outline";

export default () => (
  <>
    {/* toggle 1 */}
    <Toggle defaultValue={1} handleSelect={(value) => console.log(value)}>
      <ToggleItem value={1} text="All" icon={CollectionIcon} />
      <ToggleItem value={2} text="Succeeded" icon={CheckIcon} />
      <ToggleItem value={3} text="Refunded" icon={ReceiptRefundIcon} />
    </Toggle>

    {/* toggle 2 */}
    <Toggle
      color="zinc"
      defaultValue={1}
      handleSelect={(value) => console.log(value)}
    >
      <ToggleItem value={1} text="Absolute" />
      <ToggleItem value={2} text="Relative" />
    </Toggle>

    {/* toggle 3 */}
    <Toggle
      color="zinc"
      defaultValue={ 1 }
      handleSelect={ (value) => console.log(value) }
    >
      <ToggleItem value={ 1 } icon={ChartPieIcon} />
      <ToggleItem value={ 2 } icon={ViewListIcon} />
    </Toggle>
  </>
);

Controlled state example

The example below shows a Toggle with a controlled state.

import { useState } from "react";
import { Toggle, ToggleItem } from "@tremor/react";

export default () => {
	const [value, setValue] = useState(null);

	return (
		<Toggle value={value} onValueChange={ setValue }>
        <ToggleItem value={5} text={'Five'} />
        <ToggleItem value={3} text={'Three'} />
        <ToggleItem value={1} text={'One'} />
    </Toggle>
	);
}

API Reference: Toggle

defaultValueoptional
Description
Sets the default selected toggle item in an uncontrolled setting.
Type
any
Default
-
Values
E.g. { 1 }
valueoptional
Description
The controlled state of a Toggle. Must be used in conjunction with onValueChange.
Type
any
Default
-
Values
E.g. { 1 }
onValueChangeoptional
Description
Event handler called when the state of the toggle changes.
Type
function
Default
Values
coloroptional
Description
Set the color of the active toggle.
Type
string
Default
blue
Values
See color section
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0

Properties ToggleItem

value
Description
Assigns a value to a toggle, which is used in the parent component to idenify the item.
Type
any
Default
-
Values
E.g. { 1 }
textoptional
Description
Displayed toggle text.
Type
string
Default
-
Values
iconoptional
Description
Set an icon left to the toggle text.
Type
React.ElementType
Default
-
Values