Components
Text fields and descriptions
Native input contracts with the app’s updated surfaces and typography.
On this page
Purpose and composition
FormField and TextareaField wrap standard controls with optional leading icons. Labels and validation remain the caller’s responsibility.
Anatomy
- Visible associated label
- Optional icon
- Input or textarea
- Nearby help/error text
Configuration and variants
| Input or variant | Contract |
|---|---|
| FormField | Accepts native input props plus iconClass, bold, and noMargin. |
| Controlled values | Undefined input values normalize to an empty string. |
| Read-only copy | Clicking a read-only FormField writes its value to the clipboard and briefly shows copied feedback. |
| TextareaField | Requires iconClass and uses a non-resizable textarea. |
States and feedback
The specimens show editable, focused, and read-only fields. Authentication and builder pages supply their own visible errors.
Interaction and responsive behavior
Keep fields in the source form wrapper. The read-only copy handler overrides the input click behavior; copying is a separate interaction from editing.
Accessibility and known limits
Provide id/label association and appropriate autocomplete. Clipboard success is not awaited, errors are not surfaced, and copied text is not a live announcement in the current wrapper.
Composition example
<label htmlFor="course-title">Course title</label>
<FormField id="course-title" value={title} onChange={onTitleChange} />Source references
| File | Responsibility |
|---|---|
| src/components/forms/FormField.tsx | Input wrapper |
| src/components/forms/TextareaField.tsx | Textarea wrapper |
Interface examples
Native TeachKit interfaces with fictional course, account, and learner records. Service responses and media are isolated demonstrations; no customer data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0