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.

For design guidelines and all interactive states, see the Inputs design page.

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

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

With a label. Pass an id so the label is associated with the input; without it, clicking the label won't toggle the switch:

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

With success and error states:

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

Disabled toggles get built-in styling with a not-allowed cursor and gray colors:

<Toggle disabled />

The underlying input always renders with role="switch", so assistive technologies announce it as a switch.

Properties