1 viewer
Back to Components
Component · Input

Input

Accessible text entry with validation and description wiring.

Category
Input
Slots
5
States
4
Writer
Shared
cre8.primitive.input

Preview

Live renderShared SSR + WASM writers
Enter a component name or connection identifier.
<Input
  default="Table"
  description="Enter a component name or connection identifier."
  label="Query String"
  name="search_query"
  placeholder="e.g. Protocol.Ingest"
/>

Variants

States and intents
Description remains visible with an error.Choose a different value.

Anatomy

The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.

SlotDOM class
root.primitive-input
label—
control—
description—
error—
5 rows
Hydration markers
data-cre8-control

States and platforms

The states the contract publishes, the platforms it declares, and the style recipes that dress it.

States
disabledinvalidrequiredtouched
Platforms
webnativeruntime-node
Recipes
unstyledruntime-console

Renderers

Shared writer
Input renders through the one writer the server and the WASM DOM share, so both emit the same markup.

Every tag in the example above renders through a shared writer.

Declared adapters. A status is the manifest's declaration, not a measured parity result.

TargetRendererStatus
webreactexperimental
runtime-nodeview-nodeready
ssrhtml-form-controlready
terminalterminal-form-controlplanned
nativenative-adapterexperimental
5 rows

Accessibility

Labels, descriptions, and errors are programmatically connected.

  • Controls have a stable accessible name.
  • Errors use aria-invalid and alert semantics.