Density

Switch

Switch composes Base UI’s switch root and thumb with Density control attributes on the root.

Enable notifications
import { useState } from "react";
import { Switch } from "density-base-ui";

export default function SwitchExample() {
  const [notificationsEnabled, setNotificationsEnabled] = useState(true);

  return (
    <Switch
      checked={notificationsEnabled}
      onCheckedChange={setNotificationsEnabled}
    >
      Enable notifications
    </Switch>
  );
}

Props

Prop Attribute Values Default
label None React node None
hint None React node None
fieldOrientation None vertical, horizontal vertical
emphasis data-dn-emphasis primary, secondary, outline, ghost secondary
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md

Label and hint

EnabledApplied to project updates.
import { Switch } from "density-base-ui";
export default function SwitchFieldExample() {
  return (
    <Switch checked label="Notifications" hint="Applied to project updates.">
      Enabled
    </Switch>
  );
}

Field orientation

Enabled
Enabled
import { Switch } from "density-base-ui";
export default function SwitchFieldOrientationExample() {
  return (
    <div style={{ display: "grid", gap: "1rem" }}>
      <Switch checked fieldOrientation="vertical" label="Vertical">
        Enabled
      </Switch>
      <Switch checked fieldOrientation="horizontal" label="Horizontal">
        Enabled
      </Switch>
    </div>
  );
}

Emphasis

PrimarySecondaryOutlineGhost
import { Switch } from "density-base-ui";

export default function SwitchEmphasisExample() {
  return (
    <div style={{ display: "grid", gap: "0.75rem" }}>
      <Switch checked emphasis="primary">
        Primary
      </Switch>
      <Switch checked emphasis="secondary">
        Secondary
      </Switch>
      <Switch checked emphasis="outline">
        Outline
      </Switch>
      <Switch checked emphasis="ghost">
        Ghost
      </Switch>
    </div>
  );
}

Size

2xsxssmmdlgxl2xl3xl
import { Switch } from "density-base-ui";

export default function SwitchSizeExample() {
  return (
    <div style={{ display: "grid", gap: "0.75rem" }}>
      <Switch checked size="2xs">
        2xs
      </Switch>
      <Switch checked size="xs">
        xs
      </Switch>
      <Switch checked size="sm">
        sm
      </Switch>
      <Switch checked size="md">
        md
      </Switch>
      <Switch checked size="lg">
        lg
      </Switch>
      <Switch checked size="xl">
        xl
      </Switch>
      <Switch checked size="2xl">
        2xl
      </Switch>
      <Switch checked size="3xl">
        3xl
      </Switch>
    </div>
  );
}