Use FormGroup to normalize label, hint, and error placement.
FormGroup
Layout wrapper that standardizes label and support messaging around form controls.
- .source-form-group Root vertical stack
- .source-form-group-label Optional associated label
- .source-form-group-required Required marker
- .source-form-group-message Hint or error feedback
States
StateAppearance
DefaultMessage uses secondary text color.
ErrorMessage switches to danger color via
data-source-state="error".Design intent
FormGroup is scaffolding, not a control. It wraps any custom input to give it consistent label placement, required marking, hint text, and error messaging. Use it when building controls that Source's native inputs do not cover, not when wrapping components that already handle their own labels.
When to use
Do
Swap hint and error text based on state. Do not show both simultaneously.
Use the same required pattern across the whole form.
Don't
Do not wrap a component that already renders its own label and message.
Avoid patterns where field meaning disappears while typing.
Do not delay clear validation feedback once the user corrected the value.
Composition
FormGroup is presentation-only. It does not manage input state. Compose it with Input, Select, Textarea, or custom controls.
Designer checklist
- Label is always visible. Do not float or animate the label out of view.
- Hint text and error message are never shown at the same time.
- The asterisk for required fields is explained at form level, not per field.
- FormGroup is not wrapping a component that already renders its own label.
FormGroup props
PropTypeDefaultDescription
labelstringnullLabel text above children.
hintstringnullSupport text when no error exists.
errorstringnullError text and error state trigger.
requiredbooleanfalseDisplays required marker.
htmlForstringnullFor attribute on label.
Basic usage
import { FormGroup, Input } from '@pierredelattre/source-react';
<FormGroup label="Workspace" hint="Use a clear team-facing name" htmlFor="workspace">
<Input id="workspace" />
</FormGroup>Custom control usage
<FormGroup label="Theme" error={errors.theme} htmlFor="theme" required>
<select id="theme" className="source-select">
<option>Blue</option>
<option>Green</option>
</select>
</FormGroup>Component tokens
FormGroup reuses global semantic tokens for label and message text. It does not define component-scoped tokens.
ARIA attributes
AttributePurpose
label[for]Associates visible label with nested control.
required markerMarked
aria-hidden and must be paired with real required input attribute.