Switch

Inputs & Controls

Switch

Material switch with checked/unchecked icons and loading states.

Usage

Toggle boolean preferences or settings.

Highlights

• Optional icons for each thumb state
• Disabled + loading appearances

When to use it

• Users immediately expect state changes (e.g., settings).
• Prefer continuous toggles over checkboxes.

Related components

CheckboxButton

Examples

Default

Preview (Web)

import { useState } from 'react';
import { Switch } from 'react-native-molecules/components/Switch';

export default function Example() {
  const [isOn, setIsOn] = useState(false);

  return (
      <Switch
          value={isOn}
          onValueChange={setIsOn}
          checkedIcon="check"
      />
  );
}

Prop	Type	Default	Description
checkedIcon	string | undefined	—	—
unCheckedIcon	string | undefined	—	—
size	number | undefined	—	—
checkedIconType	"material-community" | "feather" | undefined	—	—
uncheckedIconType	"material-community" | "feather" | undefined	—	—
thumbStyle	ViewStyle | undefined	—	—
thumbContainerStyle	ViewStyle | undefined	—	—
switchOverlayStyle	ViewStyle | undefined	—	—
iconStyle	TextStyle | undefined	—	—

Defined in react-native-molecules/components/Switch