Toggle Component

Toggle is a React component designed to create customizable input fields with options such as color, label, and more. It supports different sizes and colors along with disabled and checked states.

Example Preview

Toggle Example

Usage

import { Toggle } from "@/@core";
 
// ...
 
const MyComponent = () => {
  return (
    <Fragment>
      <Toggle defaultChecked color="primary" label="Primary Toggle" />
      <Toggle checked color="error" size="lg" label="Large Error Toggle" />
      <Toggle disabled label="Disabled Toggle" />
    </Fragment>
  );
};
 
export default MyComponent;

Props

Prop name	Type	Default value	Required	Description
`checked`	boolean	-	No	Boolean indicating whether the checkbox is checked.
`defaultChecked`	boolean	-	No	Boolean indicating the default checked state.
`color`	`primary`, `secondary`, `error`, `success`, `warning`, `info`, `accent`	-	No	String representing the color theme of the checkbox.
`label`	string	-	No	String representing the label text for the checkbox.
`disabled`	boolean	-	No	Boolean indicating whether the checkbox is disabled.
`size`	`xs`, `sm`, `md`, `lg`	-	No	String representing the size of the checkbox.
`className`	string	-	No	Additional class names for styling purposes.
`props`	HTMLAttributes<HTMLInputElement>	-	No	Additional HTML attributes can be passed as well.

Styling

The component provides various styling options based on the color and size props. The label text size and color can be customized accordingly.

Customizing Example

import { Toggle } from "@/@core";
 
const MyComponent = () => {
  const [checked, setChecked] = useState(false);
 
  return (
    <Fragment>
      <Toggle
        checked={checked}
        color="primary"
        label="Primary Toggle"
        className="checked:border-indigo-800 [--chkbg:theme(colors.indigo.600)] [--chkfg:orange]"
        onChange={() => setChecked(!checked)}
      />
      <Toggle
        defaultChecked
        color="primary"
        label="Primary Toggle"
        className="[--chkbg:oklch(var(--a))] [--chkfg:oklch(var(--p))]"
      />
    </Fragment>
  );
};
 
export default MyComponent;

All Available Props

import { Toggle } from '@/@core';
 
// ...
 
const AllAvailableProps = () => {
   return (
      <Fragment>
         <Toggle
            checked={/* boolean */}
            defaultChecked={/* boolean */}
            color={/* 'primary' | 'secondary' | 'error' | 'success' | 'warning' | 'info' | 'accent' */}
            label={/* string */}
            disabled={/* boolean */}
            size={/* 'xs' | 'sm' | 'md' | 'lg' */}
            className={/* string */}
            /* Other HTML attributes for the input element */
          />
      </Fragment>
   );
};
 
export default AllAvailableProps;

ℹ️

Note: The Toggle component is inspired by the DaisyUI (opens in a new tab) framework. Check it out for more awesome components. But our Toggle component is dynamic and easy to use. It is also fully customizable.

Textarea Customizing our Components