Toggle - Develop

The Toggle component is just a cooler 😎 input checkbox or radio element.

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

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

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

You can add a label by adding a $label prop.

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

export default function Page() {
  return (
    <Toggle $label="Label" $fullWidth />
  )
}

Here is an example of a Toggle with success and error state.

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

export default function Page() {
  return (
    <>
      <Toggle $success />
      <Toggle $error />
    </>
  )
}

Properties

Explore the source code on GitHub: