Switch

A Switch component is a UI element that allows users to toggle between two states, typically representing an on/off or enabled/disabled choice. It is visually represented as a sliding toggle or checkbox and provides immediate feedback when the user interacts with it. Switch components are commonly used for settings, preferences, and feature activations in applications, enhancing user experience by simplifying the selection process.

Demo

Rendered live, with the same build of the library you install.

Usage

Source
Switch.tsx
import { useState } from 'react';
import { NSwitch } from '@nayan-ui/react';


const Switch = () => {
  const [airplane, setAirplane] = useState(false);
  const [wifi, setWifi] = useState(true);


  return (
    <div>
      <div>
        <div className="max-w-sm space-y-3">
          <NSwitch label="Airplane Mode" enabled={airplane} onChange={setAirplane} />
          <NSwitch label="Wi-Fi" enabled={wifi} onChange={setWifi} />
          <NSwitch label="Bluetooth (disabled)" enabled={false} disabled onChange={() => {}} />
        </div>
      </div>
    </div>
  );
};


export default Switch;

Attributes

10 props
NameTypeDefaultDetails
enabledbooleanOptionalWhether the switch is enabled.
defaultCheckedbooleanOptionalDefault checked state.
labelReact.ReactNodeOptionalLabel for the switch.
classNamestring' 'You can customise by passing tailwind classes.
labelClassNamestring' 'You can customise by passing tailwind classes.
switchClassNamestring' 'You can customise by passing tailwind classes.
onChange(checked: boolean) => voidOptionalCallback when switch state changes.
idstringOptionalID for the switch.
checkedbooleanOptionalAlias of enabled for controlled state.
disabledbooleanfalseWhether the switch is disabled.

Tags

Other components solving nearby problems.