Input

The Input component encompasses various text input types, including radio buttons and checkboxes. Inputs can have error or success states to provide feedback to the user.

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 { Input } from "cherry-styled-components";

export default function Page() {
  return <Input type="text" placeholder="Placeholder" />;
}

You can add a label with the $label prop:

<Input type="text" $label="Username" $fullWidth />

Checkbox and radio examples:

<Input type="checkbox" defaultChecked />
<Input type="radio" />

Properties