# Toggle
> Cherry Toggle component - a stylish checkbox/radio alternative with validation states.
Source: https://cherry.al/code/toggle
> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).
# Toggle
The Toggle component is a stylish input checkbox or radio element.
Keep in mind that the `` 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](/inputs) design page.
```jsx
import React from "react";
import { Toggle } from "cherry-styled-components";
export default function Page() {
return ;
}
```
With a label. Pass an `id` so the label is associated with the input; without it, clicking the label won't toggle the switch:
```html
```
With success and error states:
```html
```
Disabled toggles get built-in styling with a `not-allowed` cursor and gray colors:
```html
```
The underlying input always renders with `role="switch"`, so assistive technologies announce it as a switch.
## Properties
The underlying input type. Defaults to `"checkbox"`.
Label text displayed alongside the toggle. Requires an `id` on the toggle so the label's `htmlFor` points to the input; otherwise label clicks won't toggle it.
Size of the toggle.
Shows error state styling.
Shows success state styling.
Makes the toggle span the full width of its container.
Class name applied to the wrapper element around the toggle, for restyling from the outside.