Skip to main content

CodeField

CodeField

Monospaced text area for code, markup or diagram source, where Tab indents

Tags: component form code editor

View Demo

CodeField is a text area for source text — a code sample, a mermaid diagram, a block of markup an editor cannot show as a form. It is monospaced, never spellchecked or autocapitalized, and does not wrap long lines unless asked to.

Tab indents (at the cursor, or every selected line) and Shift+Tab outdents, as in a code editor. So keyboard users are never trapped, Escape releases Tab for one press: Escape, then Tab, moves focus on. Screen readers hear that hint with the field.

It is a field, not an IDE: no syntax highlighting or line numbers.

Import​

<script>
  import { CodeField } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<script>
  import { CodeField } from '@classic-homes/theme-svelte';

  let source = $state('flowchart TD\n  A --> B');
</script>

<CodeField label="Diagram source" bind:value={source} rows={6} />

Props​

Prop Type Default Description
value string '' The text (bindable)
label string - Accessible name; or use aria-labelledby
id string - For a visible <Label for>
rows number 8 Visible lines
indent number 2 Spaces per indent level
wrap boolean false Soft-wrap long lines instead of scrolling sideways
placeholder string - Placeholder text
disabled boolean false Disable the field
readonly boolean false Read only; Tab moves focus as usual
aria-invalid boolean - Error styling
aria-describedby string - Extra description ids (the Tab hint is always added)
onValueChange (value: string) => void - Called on every change

Keyboard​

Keys Action
Tab Indent at the cursor, or every selected line
Shift+Tab Outdent the current or selected lines
Escape, then Tab Leave the field

Indenting goes through the browser's editing pipeline where it can, so Ctrl+Z undoes it.

Accessibility​

  • Give it a name with label or aria-labelledby.
  • The Tab/Escape hint is announced through aria-describedby.
On this page