1 viewer
Component · Input
Field
Canonical input element inside a Form (or standalone). Owns its own block class so it can be styled outside a Form.
- Category
- Input
- Slots
- 5
- States
- 3
- Writer
- Shared
Preview
Durable account address bound in HyperDB.
<Field default="acc-0x892a" description="Durable account address bound in HyperDB." label="Operator Account" name="account_id" />
Variants
Anatomy
The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.
| Slot | DOM class |
|---|---|
| root | .primitive-field |
| label | .primitive-field__label |
| control | — |
| required | .primitive-field__required |
| hint | .primitive-field__hint |
- Modifier
- primitive-field--{kind}
- State attribute
- data-requiredfrom the required prop
States and platforms
The states the contract publishes, the platforms it declares, and the style recipes that dress it.
States
Platforms
Recipes
Renderers
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.
| Target | Renderer | Status |
|---|---|---|
| web | react | experimental |
| runtime-node | view-node | ready |
| ssr | html-form-control | ready |
| terminal | terminal-form-control | planned |
| native | native-adapter | experimental |
Accessibility
Preserves the shared Input label, description, and error wiring for compatibility-only runtime views.
- Field aliases keep the same programmatic label, help text, and validation relationships as Input.
- Invalid fields expose aria-invalid plus an announced inline error without depending on recipe styling.