Get Started
Components
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
Usage
import { useState } from 'react';import { NSwitch } from '@nayan-ui/react';const Switch = () => {const [enabled, setEnabled] = useState(false);return <NSwitch label="Is Dark Mode" enabled={enabled} onChange={setEnabled} />;};export default Switch;
Attributes
| Name | Type | Default | Details |
|---|---|---|---|
| enabled | boolean | Optional | Whether the switch is enabled. |
| defaultChecked | boolean | Optional | Default checked state. |
| label | React.ReactNode | Optional | Label for the switch. |
| className | string | ' ' | You can customise by passing tailwind classes. |
| labelClassName | string | ' ' | You can customise by passing tailwind classes. |
| switchClassName | string | ' ' | You can customise by passing tailwind classes. |
| onChange | (checked: boolean) => void | Optional | Callback when switch state changes. |
| id | string | Optional | ID for the switch. |