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

Properties ToggleItem