# Input
> Cherry Input component - text fields, checkboxes, and radio buttons with validation states.
Source: https://cherry.al/code/input
> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).
# 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 `` 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 { Input } from "cherry-styled-components";
export default function Page() {
return ;
}
```
You can add a label with the `$label` prop:
```html
```
Checkbox and radio examples:
```html
```
## Properties
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.
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`.
Class name applied to the wrapper element around the input, for restyling from the outside.
Size of the input.
Shows error state styling. Also sets `aria-invalid` on the input element automatically.
Shows success state styling.
Makes the input span the full width of its container.
Icon element rendered inside the input.
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 `` attributes.
- `StyledInputWrapper` is the flex wrapper element rendered around the label and input.
- `StyledLabel` is the styled `