Forms

Input

Single-line text field with invalid state.

Import

tsx

import { Input } from "@cooud-ui/ui";

bash

npx cooud-ui add input

Examples

Default

A single-line text input.

tsx

<Input placeholder="you@cooud.dev" />

Invalid state

Set `invalid` and pair it with a FieldError for accessible validation feedback.

Enter a valid email address.

tsx

<Field>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input
    id="email"
    invalid
    defaultValue="not-an-email"
    aria-describedby="email-err"
  />
  <FieldError id="email-err">Enter a valid email address.</FieldError>
</Field>

Disabled

A non-interactive input.

tsx

<Input placeholder="Disabled" disabled />

API Reference

Generated from the component's exported types.

InputProps

Extends InputHTMLAttributes<HTMLInputElement>

Prop	Type	Default	Description
`invalid`	`boolean`	`false`	—