Unify form labels: FieldLabel component above controls instead of floating labels

prih · prih · commit 9f7c08d07206 · 2026-03-17T17:07:29.000Z
Replace MUI floating InputLabel with FieldLabel placed above inputs for
consistent, readable forms. Affects NoteForm, TaskForm, SkillForm, and
Tools playground. FieldLabel: uppercase, semibold, text.secondary color.
diff --git a/ui/src/app/theme.ts b/ui/src/app/theme.ts
@@ -186,6 +186,19 @@ export const lightTheme = createTheme({
   },
   typography,
   components: {
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          fontSize: '0.8125rem',
+          textTransform: 'uppercase' as const,
+          letterSpacing: '0.04em',
+          fontWeight: 500,
+          '&.MuiInputLabel-shrink': {
+            transform: 'translate(14px, -9px) scale(0.85)',
+          },
+        },
+      },
+    },
     MuiDrawer: {
       styleOverrides: {
         paper: {
diff --git a/ui/src/features/note-crud/NoteForm.tsx b/ui/src/features/note-crud/NoteForm.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
-import { Box, Button, TextField, CircularProgress, Typography } from '@mui/material';
-import { Section, FormGrid, FormField, Tags, MarkdownEditor } from '@/shared/ui/index.ts';
+import { Box, Button, TextField, CircularProgress } from '@mui/material';
+import { Section, FormGrid, FormField, FieldLabel, Tags, MarkdownEditor } from '@/shared/ui/index.ts';
 import type { Note } from '@/entities/note/index.ts';
 
 interface NoteFormProps {
@@ -43,18 +43,18 @@ export function NoteForm({ note, onSubmit, onCancel, submitLabel = 'Save' }: Not
       <Section title="Details">
         <FormGrid>
           <FormField fullWidth>
+            <FieldLabel required>Title</FieldLabel>
             <TextField
               autoFocus
               fullWidth
-              label="Title"
               value={title}
               onChange={e => { setTitle(e.target.value); setTitleError(false); }}
               error={titleError}
               helperText={titleError ? 'Title is required' : undefined}
             />
           </FormField>
           <FormField fullWidth>
-            <Typography variant="caption" color="text.secondary" sx={{ mb: 0.5 }}>Content</Typography>
+            <FieldLabel>Content</FieldLabel>
             <MarkdownEditor value={content} onChange={setContent} height={300} />
           </FormField>
           <FormField fullWidth>
diff --git a/ui/src/features/skill-crud/SkillForm.tsx b/ui/src/features/skill-crud/SkillForm.tsx
@@ -1,11 +1,11 @@
 import { useState, useEffect } from 'react';
 import {
-  Box, Button, TextField, FormControl, InputLabel, Select, MenuItem,
-  CircularProgress, Typography, IconButton, Slider,
+  Box, Button, TextField, Select, MenuItem, Typography,
+  CircularProgress, IconButton, Slider,
 } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
-import { Section, FormGrid, FormField, Tags, MarkdownEditor } from '@/shared/ui/index.ts';
+import { Section, FormGrid, FormField, FieldLabel, Tags, MarkdownEditor } from '@/shared/ui/index.ts';
 import type { Skill } from '@/entities/skill/index.ts';
 
 interface SkillFormProps {
@@ -92,18 +92,18 @@ export function SkillForm({ skill, onSubmit, onCancel, submitLabel = 'Save' }: S
       <Section title="Details">
         <FormGrid>
           <FormField fullWidth>
+            <FieldLabel required>Title</FieldLabel>
             <TextField
               autoFocus
               fullWidth
-              label="Title"
               value={title}
               onChange={e => { setTitle(e.target.value); setTitleError(false); }}
               error={titleError}
               helperText={titleError ? 'Title is required' : undefined}
             />
           </FormField>
           <FormField fullWidth>
-            <Typography variant="caption" color="text.secondary" sx={{ mb: 0.5 }}>Description</Typography>
+            <FieldLabel>Description</FieldLabel>
             <MarkdownEditor value={description} onChange={setDescription} height={200} />
           </FormField>
         </FormGrid>
@@ -139,7 +139,7 @@ export function SkillForm({ skill, onSubmit, onCancel, submitLabel = 'Save' }: S
       <Section title="Matching">
         <FormGrid>
           <FormField fullWidth>
-            <Typography variant="caption" color="text.secondary" sx={{ mb: 0.5 }}>Triggers</Typography>
+            <FieldLabel>Triggers</FieldLabel>
             <Tags
               tags={triggers}
               editable
@@ -148,7 +148,7 @@ export function SkillForm({ skill, onSubmit, onCancel, submitLabel = 'Save' }: S
             />
           </FormField>
           <FormField fullWidth>
-            <Typography variant="caption" color="text.secondary" sx={{ mb: 0.5 }}>Input Hints</Typography>
+            <FieldLabel>Input Hints</FieldLabel>
             <Tags
               tags={inputHints}
               editable
@@ -157,7 +157,7 @@ export function SkillForm({ skill, onSubmit, onCancel, submitLabel = 'Save' }: S
             />
           </FormField>
           <FormField fullWidth>
-            <Typography variant="caption" color="text.secondary" sx={{ mb: 0.5 }}>File Patterns</Typography>
+            <FieldLabel>File Patterns</FieldLabel>
             <Tags
               tags={filePatterns}
               editable
@@ -171,19 +171,15 @@ export function SkillForm({ skill, onSubmit, onCancel, submitLabel = 'Save' }: S
       <Section title="Properties">
         <FormGrid>
           <FormField>
-            <FormControl fullWidth>
-              <InputLabel>Source</InputLabel>
-              <Select value={source} label="Source" onChange={e => setSource(e.target.value as 'user' | 'learned')}>
-                <MenuItem value="user">User</MenuItem>
-                <MenuItem value="learned">Learned</MenuItem>
-              </Select>
-            </FormControl>
+            <FieldLabel>Source</FieldLabel>
+            <Select fullWidth value={source} onChange={e => setSource(e.target.value as 'user' | 'learned')}>
+              <MenuItem value="user">User</MenuItem>
+              <MenuItem value="learned">Learned</MenuItem>
+            </Select>
           </FormField>
           <FormField>
             <Box sx={{ px: 1 }}>
-              <Typography variant="caption" color="text.secondary" gutterBottom>
-                Confidence: {Math.round(confidence * 100)}%
-              </Typography>
+              <FieldLabel>Confidence: {Math.round(confidence * 100)}%</FieldLabel>
               <Slider
                 value={confidence}
                 onChange={(_e, v) => setConfidence(v as number)}
diff --git a/ui/src/features/task-crud/TaskForm.tsx b/ui/src/features/task-crud/TaskForm.tsx
@@ -1,9 +1,9 @@
 import { useState, useEffect } from 'react';
 import {
-  Box, Button, TextField, FormControl, InputLabel, Select, MenuItem,
-  CircularProgress, Typography,
+  Box, Button, TextField, Select, MenuItem,
+  CircularProgress,
 } from '@mui/material';
-import { Section, FormGrid, FormField, Tags, MarkdownEditor } from '@/shared/ui/index.ts';
+import { Section, FormGrid, FormField, FieldLabel, Tags, MarkdownEditor } from '@/shared/ui/index.ts';
 import { COLUMNS, type Task, type TaskStatus, type TaskPriority } from '@/entities/task/index.ts';
 
 interface TaskFormProps {
@@ -62,18 +62,18 @@ export function TaskForm({ task, onSubmit, onCancel, submitLabel = 'Save' }: Tas
       <Section title="Details">
         <FormGrid>
           <FormField fullWidth>
+            <FieldLabel required>Title</FieldLabel>
             <TextField
               autoFocus
               fullWidth
-              label="Title"
               value={title}
               onChange={e => { setTitle(e.target.value); setTitleError(false); }}
               error={titleError}
               helperText={titleError ? 'Title is required' : undefined}
             />
           </FormField>
           <FormField fullWidth>
-            <Typography variant="caption" color="text.secondary" sx={{ mb: 0.5 }}>Description</Typography>
+            <FieldLabel>Description</FieldLabel>
             <MarkdownEditor value={description} onChange={setDescription} height={250} />
           </FormField>
         </FormGrid>
@@ -82,38 +82,33 @@ export function TaskForm({ task, onSubmit, onCancel, submitLabel = 'Save' }: Tas
       <Section title="Properties">
         <FormGrid>
           <FormField>
-            <FormControl fullWidth>
-              <InputLabel>Status</InputLabel>
-              <Select value={status} label="Status" onChange={e => setStatus(e.target.value as TaskStatus)}>
-                {COLUMNS.map(c => <MenuItem key={c.status} value={c.status}>{c.label}</MenuItem>)}
-              </Select>
-            </FormControl>
+            <FieldLabel>Status</FieldLabel>
+            <Select fullWidth value={status} onChange={e => setStatus(e.target.value as TaskStatus)}>
+              {COLUMNS.map(c => <MenuItem key={c.status} value={c.status}>{c.label}</MenuItem>)}
+            </Select>
           </FormField>
           <FormField>
-            <FormControl fullWidth>
-              <InputLabel>Priority</InputLabel>
-              <Select value={priority} label="Priority" onChange={e => setPriority(e.target.value as TaskPriority)}>
-                <MenuItem value="critical">Critical</MenuItem>
-                <MenuItem value="high">High</MenuItem>
-                <MenuItem value="medium">Medium</MenuItem>
-                <MenuItem value="low">Low</MenuItem>
-              </Select>
-            </FormControl>
+            <FieldLabel>Priority</FieldLabel>
+            <Select fullWidth value={priority} onChange={e => setPriority(e.target.value as TaskPriority)}>
+              <MenuItem value="critical">Critical</MenuItem>
+              <MenuItem value="high">High</MenuItem>
+              <MenuItem value="medium">Medium</MenuItem>
+              <MenuItem value="low">Low</MenuItem>
+            </Select>
           </FormField>
           <FormField>
+            <FieldLabel>Due Date</FieldLabel>
             <TextField
               fullWidth
-              label="Due Date"
               type="date"
               value={dueDate}
               onChange={e => setDueDate(e.target.value)}
-              slotProps={{ inputLabel: { shrink: true } }}
             />
           </FormField>
           <FormField>
+            <FieldLabel>Estimate (hours)</FieldLabel>
             <TextField
               fullWidth
-              label="Estimate (hours)"
               type="number"
               value={estimate}
               onChange={e => setEstimate(e.target.value)}
diff --git a/ui/src/pages/tools/[toolName].tsx b/ui/src/pages/tools/[toolName].tsx
@@ -3,12 +3,12 @@ import { useParams, useNavigate } from 'react-router-dom';
 import {
   Box, Typography, TextField, Button, Table, TableBody, TableCell,
   TableContainer, TableHead, TableRow, useTheme, CircularProgress,
-  Switch, FormControlLabel, Chip, Alert,
+  Switch, Chip, Alert,
 } from '@mui/material';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import BuildIcon from '@mui/icons-material/Build';
 import MenuBookIcon from '@mui/icons-material/MenuBook';
-import { PageTopBar, Section, StatusBadge, CopyButton, EmptyState } from '@/shared/ui/index.ts';
+import { PageTopBar, Section, StatusBadge, CopyButton, EmptyState, FieldLabel } from '@/shared/ui/index.ts';
 import { getTool, callTool, type ToolInfo, type ToolCallResult, type JsonSchemaProperty } from '@/entities/tool/index.ts';
 import { getArticlesForTool } from '@/content/help/index.ts';
 
@@ -227,52 +227,42 @@ export default function ToolDetailPage() {
               Object.entries(properties).map(([name, prop]) => {
                 if (prop.type === 'boolean') {
                   return (
-                    <FormControlLabel
-                      key={name}
-                      control={
-                        <Switch
-                          checked={args[name] === 'true'}
-                          onChange={(e) => setArgs(prev => ({ ...prev, [name]: String(e.target.checked) }))}
-                          size="small"
-                        />
-                      }
-                      label={
-                        <Typography variant="body2">
-                          <Box component="span" sx={{ fontFamily: 'monospace', fontWeight: 600, mr: 0.5 }}>{name}</Box>
-                          {!required.has(name) && (
-                            <Box component="span" sx={{ color: palette.custom.textMuted }}>(optional)</Box>
-                          )}
-                        </Typography>
-                      }
-                    />
+                    <Box key={name}>
+                      <FieldLabel>{name}</FieldLabel>
+                      <Switch
+                        checked={args[name] === 'true'}
+                        onChange={(e) => setArgs(prev => ({ ...prev, [name]: String(e.target.checked) }))}
+                        size="small"
+                      />
+                    </Box>
                   );
                 }
 
                 const isMultiline = prop.type === 'array' || prop.type === 'object' ||
                   (name === 'content' || name === 'description');
 
                 return (
-                  <TextField
-                    key={name}
-                    label={`${name}${required.has(name) ? ' *' : ''}`}
-                    value={args[name] || ''}
-                    onChange={(e) => setArgs(prev => ({ ...prev, [name]: e.target.value }))}
-                    size="small"
-                    fullWidth
-                    multiline={isMultiline}
-                    minRows={isMultiline ? 2 : undefined}
-                    helperText={prop.description}
-                    placeholder={
-                      prop.enum ? prop.enum.join(' | ') :
-                      prop.type === 'array' ? '["item1", "item2"] or item1, item2' :
-                      prop.type === 'number' || prop.type === 'integer' ? '0' :
-                      undefined
-                    }
-                    slotProps={{
-                      inputLabel: { shrink: true },
-                      input: { sx: { fontFamily: 'monospace', fontSize: '0.875rem' } },
-                    }}
-                  />
+                  <Box key={name}>
+                    <FieldLabel required={required.has(name)}>{name}</FieldLabel>
+                    <TextField
+                      value={args[name] || ''}
+                      onChange={(e) => setArgs(prev => ({ ...prev, [name]: e.target.value }))}
+                      size="small"
+                      fullWidth
+                      multiline={isMultiline}
+                      minRows={isMultiline ? 2 : undefined}
+                      helperText={prop.description}
+                      placeholder={
+                        prop.enum ? prop.enum.join(' | ') :
+                        prop.type === 'array' ? '["item1", "item2"] or item1, item2' :
+                        prop.type === 'number' || prop.type === 'integer' ? '0' :
+                        undefined
+                      }
+                      slotProps={{
+                        input: { sx: { fontFamily: 'monospace', fontSize: '0.875rem' } },
+                      }}
+                    />
+                  </Box>
                 );
               })
             )}
diff --git a/ui/src/shared/ui/FieldLabel.tsx b/ui/src/shared/ui/FieldLabel.tsx
@@ -0,0 +1,27 @@
+import { Typography, type SxProps } from '@mui/material'
+import type { ReactNode } from 'react'
+
+interface FieldLabelProps {
+  children: ReactNode
+  required?: boolean
+  sx?: SxProps
+}
+
+export function FieldLabel({ children, required, sx }: FieldLabelProps) {
+  return (
+    <Typography
+      variant="caption"
+      sx={{
+        display: 'block',
+        mb: 0.75,
+        fontWeight: 600,
+        textTransform: 'uppercase',
+        letterSpacing: '0.05em',
+        color: 'text.secondary',
+        ...sx as object,
+      }}
+    >
+      {children}{required && ' *'}
+    </Typography>
+  )
+}
diff --git a/ui/src/shared/ui/index.ts b/ui/src/shared/ui/index.ts
@@ -8,6 +8,7 @@ export { FilterBar } from './FilterBar'
 export { PaginationBar } from './PaginationBar'
 export { FieldRow } from './FieldRow'
 export { FormGrid, FormField } from './FormGrid'
+export { FieldLabel } from './FieldLabel'
 export { EmptyState } from './EmptyState'
 export { ConfirmDialog } from './ConfirmDialog'
 export { MarkdownRenderer } from './MarkdownRenderer'
