forms@texuli/blocksnot agent-emittableapp
CodeField
code-field
An editable, syntax-highlighted code textarea.
Forms with the wiring documented, not guessed. Form controls take labels, descriptions and error text through props, and their keyboard and screen-reader behavior is documented in the accessibility notes below — generated from the manifest, not hand-maintained. The repository’s behavior suite holds the underlying patterns on Chromium, WebKit and a Pixel 7.
Live examples
SQL
SQL
Loading demo…
In your theme
This page renders in the site theme, enterprise-neutral. Every one of the 210 library themes re-colors every component through the --tx-* contract. The three below carry real token values from the library, rendered at build — no island, no extra requests.
Violet
backgroundsurfaceprimaryaccentborder
Monochrome
backgroundsurfaceprimaryaccentborder
Accessible Dark Contrast
backgroundsurfaceprimaryaccentborder
Props
| Name | Kind | Required | Default | Description |
|---|---|---|---|---|
value | string | no | — | — |
language | string | no | — | ts, python, yml… |
label | string | no | — | — |
labels | object | no | — | — |
placeholder | string | no | — | — |
name | string | no | — | — |
readonly | boolean | no | false | — |
disabled | boolean | no | false | — |
rows | number | no | 4 | — |
wrap | boolean | no | false | — |
tabSize | number | no | 2 | — |
indentWith | enum (spaces, tab) | no | "spaces" | — |
lineNumbers | boolean | no | false | — |
highlightLimit | number | no | — | — |
showKeyboardHint | boolean | no | false | — |
onValueChange | event | no | — | — |
class | string | no | — | — |
Keyboard
| Key | Action |
|---|---|
A, Tab, Escape | A real textarea; Tab indents, Escape then Tab leaves. |
Accessibility
- A real textarea; Tab indents, Escape then Tab leaves.
Evidence for code-field
Latest committed gates for code-field (as of 2026-10-23). Static snapshot — not live CI.
Behavior
n/ano behavior scenario
No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).
Size (gzip)
@texuli/blocks/code-field · budget 20.0 KiB
Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.
Axe
documented
tests/e2e/site-component-pages.spec.tsdocs/quality (a11y-*)
Site component pages axe gate; package-level a11y docs under docs/quality when present.
Browsers
chromiumwebkitmobile
Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.
When to use
Use when
- Edit a snippet or query
Don’t use when
Prefer another component
- Read-only code (use blocks-code)