Forms

Input

Server Component

Single-line text field with invalid state.

Import

tsx

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

bash

npx cronus-ui add input

Examples

Default

A single-line text input.

tsx

<Input placeholder="you@cronus.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 />

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 3/3Pixel diff 0 pxLogic 2/2Parity scoreboard

disabled.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component InputDisabled layout:inline style:input {
  disabled:true
  aria-label:"Name"
  label "Your name"
  text "Your name"
}

page "/audit/input/disabled" type:custom {
  use InputDisabled
}

empty.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component InputEmpty layout:inline style:input {
  aria-label:"Name"
  label "Your name"
  text "Your name"
}

page "/audit/input/empty" type:custom {
  use InputEmpty
}

invalid.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component InputInvalid layout:inline style:input {
  invalid:true
  aria-label:"Name"
  label "Your name"
  text "Your name"
}

page "/audit/input/invalid" type:custom {
  use InputInvalid
}

API Reference

Generated from the component's exported types.

InputProps

Extends InputHTMLAttributes<HTMLInputElement>

Prop	Type	Default	Description
`invalid`	`boolean`	`false`	Marks the control invalid and applies the error ring.
`value`	`string`	—	Controlled value.
`defaultValue`	`string`	—	Uncontrolled initial value.
`onChange`	`(event: ChangeEvent<HTMLInputElement>) => void`	—	Called when the value changes.
`placeholder`	`string`	—	Placeholder shown when the value is empty.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`name`	`string`	—	Submitted name when used in a form.
`required`	`boolean`	—	Marks the control as required.
`className`	`string`	—	Additional class names merged onto the root.