Switch

A Switch is binary and works as a digital on/off button.

Use when two states are opposite and to trigger immediate changes in the system.

Controlled

The selection state can be controlled by using the checked/onChange props. The value prop represents the underlying submission value of the switch when it is checked.

The switch is Off

import { useState } from "react";


export default function Demo() {
  const [checked, setChecked] = useState(false);


  return (
    <>
      <HvButton variant="subtle" onClick={() => setChecked((prev) => !prev)}>
        Toggle
      </HvButton>
      <HvSwitch
        value="on"
        checked={checked}
        aria-label="Switch"
        onChange={(_evt, newChecked) => setChecked(newChecked)}
      />
      <div>The switch is {checked ? "On" : "Off"}</div>
    </>
  );
}

import { useState } from "react";

export default function Demo() {
  const [checked, setChecked] = useState(false);

  return (
    <>
      <HvButton variant="subtle" onClick={() => setChecked((prev) => !prev)}>
        Toggle
      </HvButton>
      <HvSwitch
        value="on"
        checked={checked}
        aria-label="Switch"
        onChange={(_evt, newChecked) => setChecked(newChecked)}
      />
      <div>The switch is {checked ? "On" : "Off"}</div>
    </>
  );
}

Label position

Use the labelPosition prop to change the position of the label.

Label on the left

Label on the right

<div className="flex flex-col gap-sm">
  <HvSwitch label="Label on the left" labelPosition="left" />
  <HvSwitch label="Label on the right" labelPosition="right" />
</div>

<div className="flex flex-col gap-sm">
  <HvSwitch label="Label on the left" labelPosition="left" />
  <HvSwitch label="Label on the right" labelPosition="right" />
</div>

Custom colors

You can use the color prop to style the color of the switch.

import { useState } from "react";


export default function Demo() {
  const [checked, setChecked] = useState(false);


  return (
    <HvSwitch
      checked={checked}
      aria-label="Engine Control"
      onChange={(_evt, newChecked) => setChecked(newChecked)}
      color={checked ? "warning" : "negative"}
    />
  );
}

import { useState } from "react";

export default function Demo() {
  const [checked, setChecked] = useState(false);

  return (
    <HvSwitch
      checked={checked}
      aria-label="Engine Control"
      onChange={(_evt, newChecked) => setChecked(newChecked)}
      color={checked ? "warning" : "negative"}
    />
  );
}

Custom switch

A custom switch can be built by using the underlying form components, such as HvLabel and HvInfoMessage. See HvFormElement for more information.

Engine ControlThis is a custom description

import { useRef } from "react";


export default function Demo() {
  const inputRef = useRef<HTMLButtonElement>(null);


  return (
    <div>
      <div className="flex items-start">
        <HvLabel label="Engine Control" htmlFor="switch-input" />
        <HvInfoMessage id="switch-description">
          This is a custom description
        </HvInfoMessage>
      </div>
      <div className="flex items-center gap-xs">
        <div aria-hidden onClick={() => inputRef.current?.click()}>
          Off
        </div>
        <HvBaseSwitch
          id="switch-input"
          aria-describedby="switch-description"
          inputRef={inputRef}
          defaultChecked
        />
        <div aria-hidden onClick={() => inputRef.current?.click()}>
          On
        </div>
      </div>
    </div>
  );
}

import { useRef } from "react";

export default function Demo() {
  const inputRef = useRef<HTMLButtonElement>(null);

  return (
    <div>
      <div className="flex items-start">
        <HvLabel label="Engine Control" htmlFor="switch-input" />
        <HvInfoMessage id="switch-description">
          This is a custom description
        </HvInfoMessage>
      </div>
      <div className="flex items-center gap-xs">
        <div aria-hidden onClick={() => inputRef.current?.click()}>
          Off
        </div>
        <HvBaseSwitch
          id="switch-input"
          aria-describedby="switch-description"
          inputRef={inputRef}
          defaultChecked
        />
        <div aria-hidden onClick={() => inputRef.current?.click()}>
          On
        </div>
      </div>
    </div>
  );
}

Note

For more switch examples, check out our examples page

Switch

Controlled

Label position

Custom colors

Custom switch

Related components