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

Dark mode

To display a switch on a dark background, set theme to "dark".

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"
      theme="dark"
    />
  </form>
);

API Reference

Switch

Inherits properties from HTMLButtonElement.

Prop	Type	Default
asChild	boolean	false
checked	boolean
className	string
defaultChecked	boolean
disabled	boolean
helpText	string
label	ReactNode
name	string
onCheckedChange	(checked: boolean) => void
required	boolean
theme	"light""dark"	"light"
value	string	"on"