Switch

A Switch is <b>binary</b> and work as a digital on/off button. Use when two states are <b>opposite</b> and to trigger immediate changes in the system.

Source Code

uikit-react-core

Switch

label

required

readOnly

disabled

<HvSwitch 
  label="Switch"
  required={false}
  readOnly={false}
  disabled={false}
/>

<HvSwitch 
  label="Switch"
  required={false}
  readOnly={false}
  disabled={false}
/>

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>
    </>
  );
}

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 ? "positive" : "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 ? "positive" : "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>
  );
}

Snackbar Tag

Switch

Controlled

Custom colors

Custom switch

Related components