@nathan3boss/ui

    Switch

    The Switch component exposes an accessible toggle control backed by a native checkbox and Panda tokens.

    Usage

    import React from 'react';
import { Switch } from '@nathan3boss/ui/switch';
import { ExampleFrame } from '@docs-support/example-frame';

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

    Colors

    Use the color prop to align the on-state color with success, warning, or danger semantics.

    import React from 'react';
import { Switch } from '@nathan3boss/ui/switch';
import { ExampleFrame } from '@docs-support/example-frame';

export default () => {
  return (
    <ExampleFrame direction="column" gap="16px">
      <Switch color="success" label="Verified contact" defaultChecked />
      <Switch color="warning" label="Needs review" defaultChecked />
      <Switch color="danger" label="Blocked access" defaultChecked />
    </ExampleFrame>
  );
};

    Label Placement

    Flip the label order with labelPlacement="start" when the toggle should follow the text.

    import React from 'react';
import { Switch } from '@nathan3boss/ui/switch';
import { ExampleFrame } from '@docs-support/example-frame';

export default () => {
  return (
    <ExampleFrame>
      <Switch
        defaultChecked
        label="Show label before the toggle"
        labelPlacement="start"
      />
    </ExampleFrame>
  );
};

    API

    Switch

    Accessible switch component built on top of a native checkbox.

    PropertyDescriptionTypeDefault Value
    labelRenders text or custom content next to the switch.ReactNode-
    labelPlacementControls whether the label is rendered before or after the switch.SwitchLabelPlacement | undefinedend
    onCheckedChangeReceives the latest checked state whenever the switch changes.SwitchChangeHandler | undefined-
    sizeAdjusts the dimensions of the track and thumb.SwitchSize | undefinedmd
    colorApplies the semantic color styling to the switch.SwitchColor | undefineddefault