Switch

Alternate between selecting and deselecting.

Import Switch

Tremor exports one component to create a Switch

import { Switch } from '@tremor/react';

Usage example with controlled state

The example below shows a composition of a switch and a label.

Unlock the full potential

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.

import { Button, Card, Switch, Text, Title } from '@tremor/react';import React from 'react';
export function SwitchUsageExampleWithControlled() {  const [isSwitchOn, setIsSwitchOn] = React.useState<boolean>(false);
  const handleSwitchChange = (value: boolean) => {    setIsSwitchOn(value);  };  return (    <Card className="mx-auto max-w-md">      <h3 className="text-tremor-content-strong dark:text-dark-tremor-content-strong font-medium">Unlock the full potential</h3>      <p className="mt-1 leading-6 text-tremor-default text-tremor-content dark:text-dark-tremor-content">        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy        eirmod tempor invidunt.      </p>      <form        onSubmit={(e) => {          e.preventDefault();          alert('Submitted: ' + isSwitchOn);        }}        method="post"        className="mt-6 grid gap-y-6"      >        <div className="flex items-center space-x-3">          <Switch            id="switch"            name="switch"            checked={isSwitchOn}            onChange={handleSwitchChange}          />          <label htmlFor="switch" className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">            Activate Tremor Pro for{' '}            <span className="font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">$20/month</span>          </label>        </div>        <Button type="submit" className="w-full" disabled={!isSwitchOn}>          Submit        </Button>      </form>    </Card>  );}

API Reference: Switch

client component

checked: Sets the default value item in uncontrolled mode.

defaultChecked: The controlled state of Select. Must be used in conjunction with onChange.

onChange: Callback function for when the value of the component changes.

color: Set the color of the switch.

error: If true, the text input is labeled as invalid.

errorMessage: Text to be displayed if the error prop is set to `true`.

disabled: If true, the switch is not interactive.

required: If true, indicates that the switch selection is necessary before submitting a form.

id: Defines a unique identifier (ID) which is used to reference the element.

tooltip: Set a tooltip on hover.

Theming

Switch

Element	Theme Token
Roundness borderRadiustremor-full	borderRadiustremor-full
Background color colorstremor-border	colorstremor-border
Shadow boxShadowtremor-shadow-input	boxShadowtremor-shadow-input