Fieldset
Grupul de câmpuri. .field e un câmp — label plus control. .fieldset e colecția. Nume diferite fiindcă exact aici se confundau. WIP — de validat pe un formular real.
Markup canonic · components/fieldset.json
sursa = JSON · generat de scripts/build-catalog.py
Conflictul de nume, rezolvat
| Bono | Ce e | shadcn |
|---|---|---|
.field-label | eticheta unui câmp, deasupra lui — 12px uppercase fog | FieldLabel |
.field | UN câmp: label + control (+ ajutor, + eroare) | Field |
.fieldset | GRUPUL de câmpuri, vertical, cu titlu | FieldSet / FieldGroup |
.input-group | câmpuri ÎNRUDITE pe același rând, lățimi egale | InputGroup |
.label | eticheta unui CONTROL, lângă el — 15px ink | Label |
Cinci lucruri, cinci nume. Înainte, trei dintre ele se numeau „label” sau „field” în conversație, ceea ce e motivul pentru care aplicația a construit al șaselea.
Spațiere
.fieldset gap 18px — vertical, între câmpuri .input-group gap 12px — orizontal, între câmpuri înrudite .fieldset-legend 13px/600 ink, margin-bottom 2px .fieldset-help 13px/18px fog, ancorat sub legend
Pe orizontală câmpurile stau mai aproape (12px) decât pe verticală (18px). Cu același gap, un rând de două câmpuri se citește ca două grupuri separate.
De revizuit
WIP. De decis pe un formular real: dacă
.fieldset merită un contur propriu când e imbricat, cum arată un legend peste două rânduri, și dacă gap-ul de 18px ține la formulare de peste ~8 câmpuri sau are nevoie de o treaptă de secțiune.