Components
Fields, selects, and text areas
Keep labels, hints, values, and focus treatment consistent while preserving native input behavior.
On this page
Purpose and usage
Keep labels, hints, values, and focus treatment consistent while preserving native input behavior.
Use settings fields for preferences/profile and modal fields for project resource editors.
Anatomy
| Part | Contract |
|---|---|
| Label | SettingsField wraps label and control so the association is native. |
| Hint | Optional short contextual text beside the label. |
| Control | Surface background, line border, ink value and ink-faint placeholder. |
| Select affordance | Decorative unfold_more icon does not replace the native select. |
Variants and configuration
| Configuration | Behavior |
|---|---|
| Settings input | Shared settingsInputClasses; 48px / 52px height. |
| SelectControl | Forwards native select attributes and options. |
| AutoResizeTextarea | Use the existing auto-height implementation for descriptions. |
| Project modal fields | Separate source constants; do not assume identical sizing to settings. |
State coverage
| State | Implemented behavior |
|---|---|
| Value | Ink text on surface. |
| Placeholder | Ink-faint; not a substitute for a label. |
| Focus | Accent border and soft focus ring in settings controls. |
| Read only | Native readOnly can be passed; semantics must remain explicit. |
| Validation | Defined by each form, not a shared field error abstraction. |
Interaction and responsive behavior
- Use appropriate input types and required attributes.
- Avoid multiple interactive inputs inside the same label wrapper.
- Check long labels, helper text, validation messages, and textarea growth on a phone.
Accessibility contract
- Keep visible labels and native association.
- Connect errors to their controls where the current form offers error IDs.
- A source screenshot of a valid form does not prove that invalid-field feedback is accessible.
Known gaps and readiness
No unified field error API or async validation state exists. Light-theme muted placeholder contrast is a documented issue for uses that require normal-text contrast.
Composition example
<SettingsField label="Email address" hint="Work address">
<input className={settingsInputClasses}
type="email" name="email" required />
</SettingsField>Source references
| File | Responsibility |
|---|---|
| app/components/settings-form-controls.tsx | SettingsField, SelectControl, input classes |
| app/components/project-item-modal.tsx | ProjectModalField and modal input classes |
| app/components/auto-resize-textarea.tsx | Content-driven textarea height |
Examples from the app
Actual Radarist components with fictional data. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision 0103e2549959 · Documentation v0.1