Input - Develop

The Input component encompasses various text input types, including radio buttons and checkboxes.

Inputs are essential components in web development, used for user interactions. Inputs can have an error or success state to provide feedback to the user.

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

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

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

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

export default function Page() {
  return <Input type="text" $label="Username" $fullWidth />;
}

Here is an example of a checkbox and a radio:

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

export default function Page() {
  return (
    <Input type="checkbox" defaultChecked />
    <Input type="radio" />
  )
}

Properties

Explore the source code on GitHub: