AI Assistant

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. Disabled inputs also get dedicated styling with a not-allowed cursor and grayed-out colors, and a disabled checkbox renders a dot instead of the check icon when checked.

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 { 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

typestring

The type of input element. Accepts any native input type, such as "text", "email", "checkbox", or "radio". Date and time types ("date", "datetime-local", "month", "week", "time") automatically render a calendar icon inside the field.

$labelstring

Label text. For text-like types the label sits inline before the input and stacks above it when the wrapper wraps, for example with $fullWidth; rendered after the control for checkbox and radio.

$wrapperClassNamestring

Class name applied to the wrapper element around the input, for restyling from the outside.

$size"default" | "big" | "small"

Size of the input.

$errorboolean

Shows error state styling. Also sets aria-invalid on the input element automatically.

$successboolean

Shows success state styling.

$fullWidthboolean

Makes the input span the full width of its container.

$iconReact.ReactNode

Icon element rendered inside the input.

$iconPosition"left" | "right"

Position of the icon relative to the input.

Building blocks

Besides the Input component itself, the module exports a few pieces for composing custom fields:

  • InputProps is the TypeScript interface for all Input props, extending the native <input> attributes.
  • StyledInputWrapper is the flex wrapper element rendered around the label and input.
  • StyledLabel is the styled <label> element used to render the $label text.
IconButton PreviousTextareaNext
DiscordFigma TemplateFigma PluginGitHub