Switch | Pol-ui - A beautiful and functional UI library for React and Next.js

The Switch is a motion component that changes the color of the background when the user scrolls.

Importation

Import the component from pol-ui to use the Switch element:

import { Switch } from "pol-ui";

Default Switch

import { Switch, useBoolean } from "pol-ui";
 
export const SwitchComponent = (): JSX.Element => {
  const { value, toggle } = useBoolean(false);
  return <Switch checked={value} onChange={toggle} />;
};

Props

Prop name	Type	Default	Description
checked	boolean	false	The state of the switch
color	Colors	ColorsEnum.secondary	The color of the switch
size	MainSizes	MainSizesEnum.md	The size of the switch
label	string	-	The label of the switch
onChange	(checked: boolean) => void	-	The function to call when the switch is clicked
theme	SwitchTheme	-	The theme of the switch

Examples

All colors

import { Switch, useBoolean, ColorsEnum } from "pol-ui";
 export const AllColors = (): JSX.Element => (
  const { value, toggle } = useBoolean(false);
 
  <div className="flex flex-wrap gap-6">
    {Object.keys(ColorsEnum).map(v => (
      <div key={v} className="flex flex-col items-center justify-center">
        <Switch checked={value} onChange={toggle} color={v as Colors} label={v} />
      </div>
    ))}
    <div className="flex flex-wrap gap-6 dark pt-10">
      Dark Mode
      <div className="bg-secondary-900 text-secondary-50 flex gap-2 flex-wrap p-4">
        {Object.keys(ColorsEnum).map(v => (
          <div key={v} className="flex flex-col items-center justify-center">
            <Switch checked={value} onChange={toggle} color={v as Colors} label={v} />
          </div>
        ))}
      </div>
    </div>
  </div>
)

All sizes

import { Switch, MainSizesEnum, MainSizes } from "pol-ui";
export const AllSizes = (): JSX.Element => (
  <div className="flex flex-wrap gap-6">
    {Object.keys(MainSizesEnum).map(v => (
      <div key={v} className="flex flex-col items-center justify-center">
        <Switch size={v as MainSizes} checked={true} onChange={() => {}} label={v} />
      </div>
    ))}
  </div>
)

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface SwitchTheme {
  root: {
    base: string;
    active: IBoolean;
    label: string;
  };
  toggle: {
    base: string;
    sizes: MainSizesType;
    color: ColorsType;
    checked: IBoolean;
    handler: {
      base: string;
      sizes: MainSizesType;
    };
  };
}