Moul UIBeta
Components

Switch

Documentation for the Switch component.

React Aria

Switch

Preview

Interactive

Properties

Live Code Snippet
import { Switch } from '@moul-dev/ui';
import { useState } from 'react';

export default function Example() {
  const [isSelected, setIsSelected] = useState(false);

  return (
    <Switch
      isSelected={isSelected}
      onChange={setIsSelected}
    >
      Enable Notifications
    </Switch>
  );
}

The Switch component is built with React Aria and styled using StyleX.

Import

import { Switch } from '@moul-dev/ui';

Usage

Here is a basic example of how to use the Switch component:

import { Switch } from '@moul-dev/ui';

export default function Example() {
  return (
    <Switch>
      {/* Component content */}
    </Switch>
  );
}

Props

Switch Props

Prop

Type

Default className: react-aria-Switch

Render PropCSS Selector
isSelected
Whether the switch is checked.		[data-selected]
isHovered
Whether the switch is hovered.		[data-hovered]
isPressed
Whether the switch is pressed.		[data-pressed]
isFocused
Whether the switch is focused.		[data-focused]
isFocusVisible
Whether the switch is keyboard focused.		[data-focus-visible]
isDisabled
Whether the switch is disabled.		[data-disabled]
isReadOnly
Whether the switch is read-only.		[data-readonly]

Spinner

Documentation for the Spinner component.

Table

Documentation for the Table component.

On this page

SwitchPreviewImportUsagePropsSwitch Props