Switch

Usage

import { Switch } from "stylus-ui/Switch";

export default () => <Switch />;

Label

Pass text or an element to label to display beside the switch. By default, the switch row will grow to accommodate the width of the parent container.

Override organization permissions

Enable documents export

import { Switch } from "stylus-ui/Switch";

export default () => (
  <form className="flex w-72 flex-col gap-3">
    <Switch label="Override organization permissions" />
    <Switch label="Enable documents export" />
  </form>
);

Help text

Pass text or an element to label to display beside the switch. By default, the switch row will grow to accommodate the width of the parent container.

Scribe views

Enable notifications for when others view your Scribe

import { Switch } from "stylus-ui/Switch";

export default () => (
  <form className="w-72">
    <Switch
      label="Scribe views"
      helpText="Enable notifications for when others view your Scribe"
    />
  </form>
);

Disabled

Set disabled to prevent interaction with the switch.

Scribe views

Enable notifications for when others view your Scribe

import { Switch } from "stylus-ui/Switch";

export default () => (
  <form className="w-72">
    <Switch
      label="Scribe views"
      helpText="Enable notifications for when others view your Scribe"
      disabled
    />
  </form>
);

Controlled

To control the state, use checked and onCheckedChange.

Scribe views

Enable notifications for when others view your Scribe

import { useState } from "react";
import { Switch } from "stylus-ui/Switch";

export default () => {
  const [isEnabled, setIsEnabled] = useState(false);

  return (
    <form className="w-72">
      <Switch
        label="Scribe views"
        helpText="Enable notifications for when others view your Scribe"
        checked={isEnabled}
        onCheckedChange={setIsEnabled}
      />
    </form>
  );
};

API Reference

Switch

A control that allows the user to toggle between checked and not checked.

asChild

boolean

---

checked

boolean

---

defaultChecked

boolean

---

helpText

string

Helper text shown below the switch.

---

label

ReactNode

Label shown beside the switch (visually on the left).

---

onCheckedChange

(checked: boolean) => void

---

required

boolean

---

theme

"light" | "dark" = "light"

Visual theme for the switch track and label.

---