Components
Boolean fields
Use a switch with its visible label and explanation for course and settings flags.
On this page
Purpose and usage
Use a switch with its visible label and explanation for course and settings flags.
Anatomy
| Part | Contract |
|---|---|
| Switch | 44 × 24 visual track |
| Knob | 16px circle |
| Text | Strong label and optional description |
Variants and configuration
| Input or variant | Behavior |
|---|---|
| enabled / onChange | Controlled boolean |
| disabled | Switch disabled plus lower opacity |
| description | Optional explanatory copy |
State coverage
| State | Implemented behavior |
|---|---|
| On | Turquoise track and translated knob |
| Off | Literal neutral track |
| Disabled | Inactive switch and wrapper opacity |
Interaction and composition
- Use for a boolean preference, not a choice among registration statuses.
- Keep the reason for disabled controls visible nearby.
- Treat switch intent separately from successful server persistence.
Accessibility and readiness
Headless UI supplies switch behavior, but the complete accessible naming relationship with the wrapping label needs manual verification. Check disabled contrast and keyboard activation. Do not infer compliance from a dependency name.
Composition example
<ToggleField label="Compact presentation" enabled={compact}
onChange={setCompact} disabled={readOnly} />Source references
| File | Responsibility |
|---|---|
| src/components/ToggleField.tsx | Headless UI Switch with label wrapper |
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