Components
Boolean settings
A labeled switch for a single on/off preference.
On this page
Purpose and composition
ToggleField combines a Headless UI Switch with nearby label and description text.
Anatomy
- Label and optional description
- 44×24px pill track
- 16px thumb
Configuration and variants
| Input or variant | Contract |
|---|---|
| enabled / onChange | Controlled boolean and callback. |
| disabled | Prevents activation while preserving the current state. |
| label / description | Explain the setting and its consequences. |
States and feedback
The board shows on, off, and disabled examples. The off track uses a literal warm color rather than a theme token.
Interaction and responsive behavior
Use a switch for immediate boolean state; the parent determines whether a separate Save action is needed.
Accessibility and known limits
Headless UI provides switch behavior. Verify the resulting accessible label in context; proximity alone does not associate separate text. The 24px track height is smaller than the appearance toggle’s 44px hit area.
Source references
| File | Responsibility |
|---|---|
| src/components/ToggleField.tsx | Switch 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