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

Label and hint

EnabledApplied to project updates.
import { useState } from "react";
import { Switch } from "density-base-ui";
export default function SwitchFieldExample() {
  const [enabled, setEnabled] = useState(true);

  return (
    <Switch
      checked={enabled}
      label="Notifications"
      hint="Applied to project updates."
      onCheckedChange={setEnabled}
    >
      Enabled
    </Switch>
  );
}

Error

EnabledEnable notifications to continue.
import { useState } from "react";
import { Switch } from "density-base-ui";

export default function SwitchErrorExample() {
  const [enabled, setEnabled] = useState(false);

  return (
    <Switch
      errorMessage="Enable notifications to continue."
      hint="Applied to project updates."
      label="Notifications"
      checked={enabled}
      onCheckedChange={setEnabled}
    >
      Enabled
    </Switch>
  );
}

Field orientation

Enabled
Enabled
import { useState } from "react";
import { Switch, View, Separator } from "density-base-ui";
export default function SwitchFieldOrientationExample() {
  const [verticalEnabled, setVerticalEnabled] = useState(true);
  const [horizontalEnabled, setHorizontalEnabled] = useState(true);

  return (
    <View>
      <Switch
        checked={verticalEnabled}
        fieldOrientation="vertical"
        label="Vertical"
        onCheckedChange={setVerticalEnabled}
      >
        Enabled
      </Switch>
      <Separator />
      <Switch
        checked={horizontalEnabled}
        fieldOrientation="horizontal"
        label="Horizontal"
        onCheckedChange={setHorizontalEnabled}
      >
        Enabled
      </Switch>
    </View>
  );
}

Emphasis

PrimarySecondaryOutlineGhost primary
import { useState, type ComponentProps } from "react";
import { Switch, View } from "density-base-ui";

function EmphasisSwitch({
  emphasis,
  children,
}: Pick<ComponentProps<typeof Switch>, "emphasis" | "children">) {
  const [enabled, setEnabled] = useState(true);

  return (
    <Switch checked={enabled} emphasis={emphasis} onCheckedChange={setEnabled}>
      {children}
    </Switch>
  );
}

export default function SwitchEmphasisExample() {
  return (
    <View>
      <EmphasisSwitch emphasis="primary">Primary</EmphasisSwitch>
      <EmphasisSwitch emphasis="secondary">Secondary</EmphasisSwitch>
      <EmphasisSwitch emphasis="outline">Outline</EmphasisSwitch>
      <EmphasisSwitch emphasis="ghost-primary">Ghost primary</EmphasisSwitch>
    </View>
  );
}

Size

2xsxssmmdlgxl2xl3xl
import { useState, type ComponentProps } from "react";
import { Switch, View } from "density-base-ui";

function SizeSwitch({ size }: { size: ComponentProps<typeof Switch>["size"] }) {
  const [enabled, setEnabled] = useState(true);

  return (
    <Switch checked={enabled} onCheckedChange={setEnabled} size={size}>
      {size}
    </Switch>
  );
}

export default function SwitchSizeExample() {
  return (
    <View>
      <SizeSwitch size="2xs" />
      <SizeSwitch size="xs" />
      <SizeSwitch size="sm" />
      <SizeSwitch size="md" />
      <SizeSwitch size="lg" />
      <SizeSwitch size="xl" />
      <SizeSwitch size="2xl" />
      <SizeSwitch size="3xl" />
    </View>
  );
}