Switch

A toggle switch built on a native checkbox with role="switch".

Default

tsx

import { Switch } from "@hummingbirdui/react";

export default function SwitchDefault() {
  return <Switch label="Enable notifications" defaultChecked />;
}

Colors

The color prop offers primary (default), secondary, success, info, warning, danger, and neutral.

tsx

import { Switch } from "@hummingbirdui/react";

export default function SwitchColors() {
  return (
    <div className="flex flex-col gap-2">
      <Switch color="primary" label="Primary" defaultChecked />
      <Switch color="secondary" label="Secondary" defaultChecked />
      <Switch color="success" label="Success" defaultChecked />
      <Switch color="info" label="Info" defaultChecked />
      <Switch color="warning" label="Warning" defaultChecked />
      <Switch color="danger" label="Danger" defaultChecked />
      <Switch color="neutral" label="Neutral" defaultChecked />
    </div>
  );
}

Sizes

The size prop offers three sizes: sm, md (default), and lg.

tsx

import { Switch } from "@hummingbirdui/react";

export default function SwitchSizes() {
  return (
    <div className="flex flex-col gap-2">
      <Switch size="sm" label="Small" defaultChecked />
      <Switch size="md" label="Medium" defaultChecked />
      <Switch size="lg" label="Large" defaultChecked />
    </div>
  );
}

Inline

The inline prop lays fields out in a row.

tsx

import { Switch } from "@hummingbirdui/react";

export default function SwitchInline() {
  return (
    <div>
      <Switch inline label="Wi-Fi" defaultChecked />
      <Switch inline label="Bluetooth" />
    </div>
  );
}

Disabled

tsx

import { Switch } from "@hummingbirdui/react";

export default function SwitchDisabled() {
  return (
    <div className="flex flex-col gap-2">
      <Switch label="Disabled off" disabled />
      <Switch label="Disabled on" disabled defaultChecked />
    </div>
  );
}

API Reference

Switch

PropTypeDefaultDescription
color"primary" | "secondary" | "success" | "info" | "warning" | "danger" | "neutral""primary"Color theme of the switch.
size"sm" | "md" | "lg""md"Size of the switch.
labelReact.ReactNode—Text rendered beside the control, wrapped in a clickable label.
inlinebooleanfalseLay the field out inline.
classNamestring—Additional classes merged with the generated classes.

Styling

Hummingbird React switch is styled entirely through Hummingbird's utility classes and CSS variables.

  • See the full list of available switch classes in the Class overview.
  • Visit the CSS Variables documentation to explore all available variables.
PreviousRadioNextInput Group