Switch

A control that lets the user toggle between checked and unchecked states.

Preview
Code

Installation

npm
yarn
pnpm
bun

npm i @melio-ui/switch

If @melio-ui/react is already installed globally, you can skip this step.

Import

Individual
Global

import { 
  SwitchRoot,
  SwitchTrack,
  SwitchThumb,
  SwitchLabel,
} from '@melio-ui/switch';

SwitchRoot: All parts of the switch are included.
SwitchTrack: It represents the switch's background, indicating on and off states with different colors or styles.
SwitchThumb: It is the interactive element that toggles between on and off states.
SwitchLabel: It displays text or content next to the switch to clarify its purpose.

Another way to import

'use client';

import { Switch } from '@melio-ui/switch';

<Switch.Root>
  <Switch.Track>
    <Switch.Thumb />
  </Switch.Track>
  <Switch.Label>Label</Switch.Label>
</Switch.Root>;

'use client' must be used when rendering on the server side.

API Reference

SwitchRoot

All parts of the switch are included.

Prop	Type	Default	Description
checked	`boolean`	-	Set whether to check or not.
defaultChecked	`boolean`	-	The checked state of the switch when it is first rendered. Use this when there is no need to control the checked state.
disabled	`boolean`	-	Determines whether the switch is inactive.
inputProps	`React. InputHTMLAttributes <HTMLInputElement>`	-	Attributes assigned to the input element.
onCheckedChange	`(checked: boolean) => void`	-	This is an event handler that is triggered when the state of the switch changes.

Data attribute	Values
[data-state]	"checked" \| "unchecked"
[data-disabled]	Visible when disabled
[data-readonly]	Visible when read-only

SwitchTrack

It represents the switch's background, indicating on and off states with different colors or styles.

Data attribute	Values
[data-state]	"checked" \| "unchecked"
[data-disabled]	Visible when disabled
[data-readonly]	Visible when read-only

SwitchThumb

It is the interactive element that toggles between on and off states.

Data attribute	Values
[data-state]	"checked" \| "unchecked"
[data-disabled]	Visible when disabled
[data-readonly]	Visible when read-only

SwitchLabel

It displays text or content next to the switch to clarify its purpose.

Data attribute	Values
[data-state]	"checked" \| "unchecked"
[data-disabled]	Visible when disabled
[data-readonly]	Visible when read-only

Examples

defaultChecked

<SwitchRoot defaultChecked>
  <SwitchTrack>
    <SwitchThumb />
  </SwitchTrack>
</SwitchRoot>

disabled

<SwitchRoot disabled>
  <SwitchTrack>
    <SwitchThumb />
  </SwitchTrack>
</SwitchRoot>

Display Label

<SwitchRoot defaultChecked>
  <SwitchTrack>
    <SwitchThumb />
  </SwitchTrack>
  <SwitchLabel>Label</SwitchLabel>
</SwitchRoot>

Display checked/unchecked status text within the SwitchTrack.

function DisplayText() {
  const [checked, setChecked] = React.useState(false);

  return (
    <SwitchRoot checked={checked} onCheckedChange={setChecked}>
      <SwitchTrack>
        <SwitchThumb />
        {checked ? (
          <span style={{ margin: '0 28px 0 5px', color: '#fff' }}>open</span>
        ) : (
          <span style={{ margin: '0 5px 0 28px' }}>close</span>
        )}
      </SwitchTrack>
    </SwitchRoot>
  );
}

render(<DisplayText />);

Steps

Tabs