Input

A text field for collecting user input.

Overview

The Input component is a single-line text field. It supports labels, descriptions, error messages, and multiple sizes. Use it in forms, search fields, and any scenario requiring free-form text input. As a native HTML input wrapper, it supports both controlled (value + onChange) and uncontrolled (defaultValue) usage.

Always provide a label for accessibility. The Field wrapper associates a visible <label> element with the input.
Use description for persistent help text such as format requirements.
Use error only for validation feedback after interaction.

Accessibility

When label is provided, the input is automatically wrapped in a Field component that associates a <label> element with the input.
error and description messages are linked to the input via aria-describedby, ensuring screen readers announce them.
An auto-generated id is used when none is provided, maintaining the label-input association.
When disabled, the input cannot be focused or edited and is excluded from form submission.

Import

import { Input } from "@cocso-ui/react";

Default

A basic input field with a label and placeholder.

import { Input } from "@cocso-ui/react";

export default function InputDefault() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4 p-4">
      <Input label="Email" placeholder="Enter your email" />
    </div>
  );
}

Size

Four sizes are available to match surrounding content density.

Large

Medium

Small

X-Small

import { Input } from "@cocso-ui/react";

export default function InputSizes() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4 p-4">
      <Input label="Large" placeholder="Large input" size="large" />
      <Input label="Medium" placeholder="Medium input" size="medium" />
      <Input label="Small" placeholder="Small input" size="small" />
      <Input label="X-Small" placeholder="X-Small input" size="x-small" />
    </div>
  );
}

States

Use description for help text, error for validation messages, and disabled to prevent interaction.

With description

We'll never share your email.

With error

This field is required.

Disabled

import { Input } from "@cocso-ui/react";

export default function InputStates() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4 p-4">
      <Input label="With description" description="We'll never share your email." placeholder="Email" />
      <Input error="This field is required." label="With error" placeholder="Required field" />
      <Input disabled label="Disabled" placeholder="Cannot edit" />
    </div>
  );
}

Stretch

Set stretch to make the input fill the full width of its container.

API Reference

Prop	Type	Default	Description
`value`	`string`	-	Controlled value. Use together with `onChange` to manage the input state externally.
`defaultValue`	`string`	-	Initial value for uncontrolled usage. The input manages its own state internally after mount.
`onChange`	`(e: ChangeEvent<HTMLInputElement>) => void`	-	Callback invoked when the input value changes. Works in both controlled and uncontrolled modes.
`label`	`string`	-	Label text displayed above the input. When provided, the input is wrapped in a Field component with an associated `<label>` element.
`size`	`"large" \| "medium" \| "small" \| "x-small"`	`"medium"`	Controls the height, padding, and font size. Choose based on surrounding content density — use `large` for standalone forms and `x-small` for compact data entry.
`disabled`	`boolean`	`false`	Prevents interaction and visually dims the input. Disabled inputs are excluded from form submission.
`error`	`boolean \| string`	`false`	When a string, displays a red error message below the input linked via `aria-describedby`. When `true`, applies error border styling without a message.
`description`	`string`	-	Help text displayed below the input in a muted style, linked via `aria-describedby`. Hidden when `error` is set.
`stretch`	`boolean`	`false`	Expands the input to fill the full width of its container. Use in form layouts where the input should match the grid column width.