Toggle

The Toggle component is a stylish input checkbox or radio element.

Keep in mind that the <input> element inherently includes native browser properties like onChange. Cherry UI components introduce custom properties that always begin with a $ to distinguish them from native props.

import React from "react";
import { Toggle } from "cherry-styled-components";

export default function Page() {
  return <Toggle defaultChecked />;
}

With a label:

<Toggle $label="Label" $fullWidth />

With success and error states:

<Toggle $success />
<Toggle $error />

Properties