Components — Modern React UI Library

Examples

Basic Switch

Renders a toggle with a label. The child content becomes the visible label text.

Basic

Enable auto-save

Dark mode

import { Switch } from "@g4rcez/components";

function BasicSwitch() {
  return (
    <div className="flex flex-col gap-4">
      <Switch name="auto-save">Enable auto-save</Switch>
      <Switch name="dark-mode" defaultChecked>Dark mode</Switch>
    </div>
  );
}

Controlled Switch

Use onCheck to receive the next boolean value and drive state externally.

Controlled

Email notifications — off

Marketing emails — on

"use client";
import { useState } from "react";
import { Switch } from "@g4rcez/components";

function ControlledSwitch() {
  const [notifications, setNotifications] = useState(false);
  const [marketing, setMarketing] = useState(true);
  return (
    <div className="flex flex-col gap-4">
      <Switch
        name="notifications"
        checked={notifications}
        onCheck={setNotifications}
      >
        Email notifications — {notifications ? "on" : "off"}
      </Switch>
      <Switch
        name="marketing"
        checked={marketing}
        onCheck={setMarketing}
      >
        Marketing emails — {marketing ? "on" : "off"}
      </Switch>
    </div>
  );
}

Disabled and Error States

disabled prevents interaction. error renders a message below the switch.

Disabled & error

Feature locked (enabled)

Experimental featureThis setting cannot be changed until the account security review is complete and an administrator approves the update.

import { Switch } from "@g4rcez/components";

function DisabledAndError() {
  return (
    <div className="flex flex-col gap-4">
      <Switch name="locked" disabled defaultChecked>
        Feature locked (enabled)
      </Switch>
      <Switch name="broken" error="This setting cannot be changed until the account security review is complete and an administrator approves the update.">
        Experimental feature
      </Switch>
    </div>
  );
}

When to use Switch

Use when

You need the documented Switch interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Switch behavior you need.

Accessibility

Keep the Switch labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

Keep keyboard focus visible and follow the documented key commands.
Provide an accessible name and connect descriptions or errors to the control.