Switch

Customizable switch control.

Default switch

import React, { useState } from "react";
import { Switch } from "swash/controls/Switch";

const [checked, setChecked] = useState(true);
  return (
    <Switch
      onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
        setChecked(event.target.checked)
      }
      checked={checked}
    />
  );

Tints

You can customize the switch button's color by passing in a tint property:

Tints accepts all tailwind colors defined in your theme like (primary, secondary, etc...) or any custom color.

import React, { useState } from "react";
import { Switch } from "swash/controls/Switch";

const [checked, setChecked] = useState(true);
  return (
    <div className="flex gap-2">
      <Switch
        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
          setChecked(event.target.checked)
        }
        tint="success"
        checked={checked}
      />
      <Switch
        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
          setChecked(event.target.checked)
        }
        tint="warning"
        checked={checked}
      />
      <Switch
        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
          setChecked(event.target.checked)
        }
        tint="#DB4A4C"
        checked={checked}
      />
    </div>
  );

Disabled

To disable the switch button simply pass in the disabled property

import React, { useState } from "react";
import { Switch } from "swash/controls/Switch";

const [checked, setChecked] = useState(true);
  return (
    <Switch
      onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
        setChecked(event.target.checked)
      }
      checked={checked}
      disabled
    />
  );