Components
Text fields and copyable values
Reuse the source input and textarea wrappers so labels, icons and focus treatments remain recognizable across course editing.
On this page
Purpose and usage
Reuse the source input and textarea wrappers so labels, icons and focus treatments remain recognizable across course editing.
Anatomy
| Part | Contract |
|---|---|
| Persistent label | Owned by the composing form |
| Icon | Optional input icon; required textarea iconClass |
| Native input | Standard HTML attributes forwarded |
| Feedback | Read-only copy confirmation below field |
Variants and configuration
| Input or variant | Behavior |
|---|---|
| FormField | iconClass, boldText, noMargin, readOnly plus native props |
| TextareaField | iconClass and native textarea props |
| Controlled values | Missing value is normalized to empty string |
State coverage
| State | Implemented behavior |
|---|---|
| Editable | Parent value/onChange |
| Focus | Primary border and three-pixel turquoise shadow |
| Read-only | Click copies the string value |
| Copied | Two-second local confirmation |
Interaction and composition
- Pair fields with label htmlFor and stable input IDs.
- Use meaningful input types and persistent hints.
- Read-only copying is a special behavior; do not silently apply it to every noneditable value.
- Provide rejected clipboard and save feedback at the workflow level.
Accessibility and readiness
Input focus styling is implemented. Clipboard write is not awaited/caught by FormField, and its click handler replaces a forwarded onClick. Textarea boldText uses literal black. Error association, descriptions and clipboard announcements need explicit composition and verification.
Composition example
<label htmlFor="title">Course title</label>
<FormField id="title" value={title}
onChange={event => setTitle(event.target.value)} />Source references
| File | Responsibility |
|---|---|
| src/components/forms/FormField.tsx | Native input, icon, read-only copy |
| src/components/forms/TextareaField.tsx | Multiline editor field |
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1