gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add validation examples for interactive inputs

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-11 11:15:19 +02:00
parent 350bffd883
commit 542ed5bb36
2 changed files with 57 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/interactive-elements.html
+33
View File
@@ -330,6 +330,23 @@
</label>
</div>
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">form-invalid</p>
<label class="sg-labeled-input-row">
<span class="sg-label">Label</span>
<span class="sg-input-validation-stack">
<input
class="sg-interaction-element sg-input-single-line sg-form-active"
type="text"
value="Ungültige Eingabe"
aria-label="Einzeiliges Eingabefeld mit Validierung"
aria-invalid="true"
>
<span class="sg-form-validation-text">Bitte eine gültige Eingabe machen.</span>
</span>
</label>
</div>
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">form-disabled</p>
<label class="sg-labeled-input-row">
@@ -388,6 +405,22 @@
</label>
</div>
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">form-invalid</p>
<label class="sg-labeled-input-row">
<span class="sg-label">Label</span>
<span class="sg-input-validation-stack">
<textarea
class="sg-input-multi-line sg-form-active"
rows="3"
aria-label="Mehrzeiliges Eingabefeld mit Validierung"
aria-invalid="true"
>Ungültige Eingabe über mehrere Zeilen</textarea>
<span class="sg-form-validation-text">Bitte einen längeren Text eingeben.</span>
</span>
</label>
</div>
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">form-disabled</p>
<label class="sg-labeled-input-row">
styles/10-components-interactive-elements.css
+24
View File
@@ -377,6 +377,30 @@
max-width: var(--layout-form-input-field-max-width);
}
.sg-input-validation-stack {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--spacing-small);
min-width: 0;
max-width: var(--layout-form-input-field-max-width);
}
.sg-input-validation-stack .sg-input-single-line,
.sg-input-validation-stack .sg-input-multi-line {
width: 100%;
min-width: 0;
max-width: 100%;
}
.sg-form-validation-text {
margin: 0;
color: var(--text-vsf-list-card-limit-note);
font-family: var(--font-family-base);
font-size: var(--font-size-small);
line-height: var(--line-height-base);
}
.sg-labeled-input-row:has(.sg-input-multi-line) {
align-items: flex-start;
}