Inputs · AGILOX Styleguide

Input

HeightHöhe: 32 px with a 40 px hit area32 px mit 40 px Klickfläche
WidthBreite: Compact 220 px · full fills its column up to 400 px · short values (time, number) 120 px; selects use the same widthsKompakt 220 px · voll füllt die Spalte bis 400 px · kurze Werte (Zeit, Zahl) 120 px; Selects nutzen dieselben Breiten
In panelsIn Panels: In modals, offcanvas and popovers fields fill the full widthIn Modals, Offcanvas und Popovers füllen Felder die volle Breite
LabelBeschriftung: 12 px Geist Light above the field, 4 px gap12 px Geist Light über dem Feld, 4 px Abstand
RequiredPflichtfeld: No marker: a missing value keeps the form’s Save disabled with the reason (“Enter a station name”), like selects; optional fields say “(optional)” in the labelKeine Markierung: Ein fehlender Wert hält Save des Formulars deaktiviert, mit Grund („Enter a station name“), wie bei Selects; optionale Felder tragen „(optional)“ im Label
TextText: 14 px Geist Light, secondary-900; placeholder text-muted14 px Geist Light, secondary-900; Platzhalter text-muted
PlaceholderPlatzhalter: An example or the format, never the label; empty when there is nothing to addEin Beispiel oder das Format, nie das Label; leer, wenn es nichts zu ergänzen gibt
PaddingInnenabstand: 12 px left and right12 px links und rechts
BorderRand: 1 px secondary-500 · hover secondary-900 · focus 2 px focus blue1 px secondary-500 · Hover secondary-900 · Fokus 2 px Fokus-Blau
RadiusRadius: 12 px12 px
ErrorFehler: Error-colored border, the error icon in the field, the message below; the same icon in every fieldRahmen in Fehlerfarbe, Fehler-Icon im Feld, Meldung darunter; dasselbe Icon in jedem Feld
When errors showWann Fehler erscheinen: Only for what can’t be prevented: a wrong format, a name that is already taken or a server error, a typed value out of range. Checked when leaving the field and on Save, never while typing; the error clears as soon as the value is fixed. An empty required field only keeps Save disabled with the reason, no red.Nur für das, was sich nicht verhindern lässt: falsches Format, ein bereits vergebener Name oder ein Serverfehler, ein getippter Wert außerhalb des Bereichs. Geprüft beim Verlassen des Felds und bei Save, nie während des Tippens; der Fehler verschwindet, sobald der Wert stimmt. Ein leeres Pflichtfeld hält nur Save deaktiviert, mit Grund, ohne Rot.
Maximum lengthMaximale Länge: Only where the length is really limited (names, codes): typing stops at the maximum and the counter 17 / 30 sits right below the field; never redNur wo die Länge wirklich begrenzt ist (Namen, Codes): bei Erreichen des Maximums geht kein Zeichen mehr hinein, der Zähler 17 / 30 steht rechts unter dem Feld; nie rot
Read-onlySchreibgeschützt: secondary-100 surface, no border, secondary-900 text, no hover; stays in the tab order; a copy button copies the value (tooltip Copy → Copied) and shows the success toast “Copied to clipboard”Fläche secondary-100, kein Rahmen, Text secondary-900, kein Hover; bleibt in der Tab-Reihenfolge; ein Kopier-Button kopiert den Wert (Tooltip Copy → Copied) und zeigt den Erfolgs-Toast „Copied to clipboard“
DisabledDeaktiviert: secondary-100 surface, secondary-400 text, no border; the reason appears as a tooltip on hover and for 3 s on tapFläche secondary-100, Text secondary-400, kein Rahmen; der Grund erscheint als Tooltip bei Hover und 3 s beim Antippen
Icon buttonsIcon-Buttons: Dark tertiary icon buttons, 24 px, radius 8 px, 4 px inside the field edge: clear, show password; the hover never covers the borderDunkle Tertiary-Icon-Buttons, 24 px, Radius 8 px, 4 px innerhalb des Feldrands: Leeren, Passwort zeigen; der Hover liegt nie über dem Rahmen
SearchSuche: Always the search field: search icon, “Clear search”; Esc empties it and keeps the cursorImmer das Suchfeld: Such-Icon, „Clear search“; Esc leert es und lässt den Cursor drin
AutofillAutofill: Fields say what they hold (username, current-password, new-password, email, url) so browsers and password managers can fill them; off only for search and timeFelder sagen, was sie enthalten (username, current-password, new-password, email, url), damit Browser und Passwortmanager sie füllen können; off nur bei Suche und Zeit
Screen readersScreenreader: Label, hint and message are linked to the field; a message that appears is announced; an error sets aria-invalidLabel, Hinweis und Meldung sind mit dem Feld verknüpft; eine erscheinende Meldung wird vorgelesen; ein Fehler setzt aria-invalid

Every stateAlle Zustände

	DefaultStandard	HoverHover	FocusFokus
TextText	Station name	Station name	Station name
SearchSuche	Search	Search	Search
PasswordPasswort	Password	Password	Password
URLURL	Website	Website	Website
Read-onlySchreibgeschützt	—	Serial number	Serial number
Maximum lengthMaximale Länge	Name 17 / 30	Name 17 / 30	Name 17 / 30
Disabled · reasonDeaktiviert · Grund	—	Fleet name Set by your fleet admin	—

Filled and disabledAusgefüllt und deaktiviert

	FilledBefüllt	ErrorFehler	DisabledDeaktiviert
TextText	Station name	Station name This name is already used by another station.	Station name
SearchSuche	Search		Search
PasswordPasswort	Password		Password
URLURL	Website	Website Enter a web address, e.g. https://agilox.net	Website
Read-onlySchreibgeschützt	Serial number	—	—
Disabled · reasonDeaktiviert · Grund	—	—	Fleet name Set by your fleet admin

Try it — “Dock A 12” is already takenAusprobieren – „Dock A 12“ ist schon vergeben

Station name

Shown on the map and in orders.

Search

Password

Website (optional)

Try it — read-only and disabledAusprobieren – schreibgeschützt und deaktiviert

Serial number

Fleet name

Textarea

Every stateAlle Zustände

	DefaultStandard	HoverHover	FocusFokus
TextText	Note	Note	Note
Min. lengthMindestlänge	Reason (min. 20 characters) 20 characters to go 0 / 500	—	—

Filled and disabledAusgefüllt und deaktiviert

	FilledBefüllt	DisabledDeaktiviert
TextText	Note Pallet stuck at Dock A, cleared at 06:40.	Note Pallet stuck at Dock A, cleared at 06:40.
Min. lengthMindestlänge	Reason (min. 20 characters) Pallet stuck at Dock A, cleared at 06:40. 41 / 500	—
Read-onlySchreibgeschützt	Note Pallet stuck at Dock A, cleared at 06:40.	—
Disabled · reasonDeaktiviert · Grund	—	Note Pallet stuck at Dock A, cleared at 06:40. Notes close at the end of the shift

Try it — the button unlocks at 20 charactersAusprobieren — der Button wird ab 20 Zeichen frei

Reason (min. 20 characters)

20 characters to go

0 / 500

Number input

Every stateAlle Zustände

	DefaultStandard	HoverHover	FocusFokus
NumberZahl	Retries	Retries	Retries
UnitEinheit	Wait time s	Wait time s	Wait time s
Decimals · unitDezimalstellen · Einheit	Max. speed m/s	Max. speed m/s	Max. speed m/s

Filled and disabledAusgefüllt und deaktiviert

	FilledBefüllt	ErrorFehler	DisabledDeaktiviert
NumberZahl	Retries	Retries Enter a number from 0 to 10.	Retries
UnitEinheit	Wait time s		Wait time s
Decimals · unitDezimalstellen · Einheit	Max. speed m/s		Max. speed m/s
Read-onlySchreibgeschützt	Wait time s	—	—
Disabled · reasonDeaktiviert · Grund	—	—	Retries Retries are fixed for this station type

Try it — hold a stepper, add Shift for 10 stepsAusprobieren – Stepper gedrückt halten, mit Umschalt 10 Schritte

Retries

Wait time

s

Steps of 5 s, up to 600 s.

Max. speed

m/s

From 0.1 to 2.0 m/s.

Time picker

Every stateAlle Zustände

	DefaultStandard	HoverHover	FocusFokus	FilledBefüllt	ErrorFehler	DisabledDeaktiviert
24 h24 h	Shift start	Shift start	Shift start	Shift start	—	Shift start
12 h12 h	Shift start	—	—	Shift start	—	—
Read-onlySchreibgeschützt	—	—	—	Shift start	—	—
Disabled · reasonDeaktiviert · Grund	—	—	—	—	—	Shift start Shifts are planned in Plan

Try it — type “930” or pick from the listAusprobieren – „930“ tippen oder aus der Liste wählen

Shift start

Shift end

Rich text editor

Every caseAlle Fälle

	ExampleBeispiel
DefaultStandard	Release notes
FocusFokus	Release notes Version 4.2 Vehicles now wait at the charger until the next order. Faster route planning New station areas
Empty · button disabledLeer · Button deaktiviert	Release notes
Disabled · reasonDeaktiviert · Grund	Release notes Version 4.2 Vehicles now wait at the charger until the next order. Faster route planning New station areas Published notes can’t be changed

Try it — link, image, pasteAusprobieren – Link, Bild, Einfügen

Release notes

Version 4.2

Vehicles now wait at the charger until the next order.

Faster route planning
New station areas

Shown to customers in My › Updates.

Form layout

LabelsLabels: Always above the fieldImmer über dem Feld
RhythmRhythmus: 16 px between fields, 24 px between groups and between columns16 px zwischen Feldern, 24 px zwischen Gruppen und zwischen Spalten
GroupGruppe: Heading 14 px Medium, 12 px above its fieldsÜberschrift 14 px Medium, 12 px über ihren Feldern
ColumnsSpalten: One column; two columns from 1024 pxEine Spalte; zwei Spalten ab 1024 px
WidthsBreiten: Fields fill their column up to 400 px; times and numbers 120 pxFelder füllen ihre Spalte bis 400 px; Zeiten und Zahlen 120 px
Save barSave-Leiste: Sticks to the bottom while the form scrolls, with a line only then; Cancel | Save split 50/50 in a block as wide as one field (400 px), right-aligned; full width on phonesKlebt unten, während das Formular scrollt, nur dann mit Linie; Cancel | Save 50/50 in einem Block so breit wie ein Feld (400 px), rechtsbündig; auf Smartphones volle Breite
SaveSave: Disabled with the reason until every required field is filled and nothing is wrongDeaktiviert mit Grund, bis jedes Pflichtfeld gefüllt und nichts falsch ist
Leaving with changesVerlassen mit Änderungen: Opt-in per form (discardGuard on Form, or data-discard-guard on any form): leaving the page with unsaved changes (nav link, breadcrumb, app switcher, any link to another page) first asks with the small Discard changes? modal, Keep editing | Discard; Discard empties the changes and then leaves. Closing the tab or the browser back button get the browser’s own question. Saving or Cancel make the form clean again. Try it: change a field here, then click a page in the left columnPro Formular einschaltbar (discardGuard an Form oder data-discard-guard an jedem Formular): Wer die Seite mit ungespeicherten Änderungen verlässt (Nav-Link, Breadcrumb, App-Wechsler, jeder Link auf eine andere Seite), wird zuerst mit dem kleinen Modal Discard changes? gefragt, Keep editing | Discard; Discard verwirft die Änderungen und verlässt dann die Seite. Tab schließen oder der Zurück-Button des Browsers bekommen die eigene Frage des Browsers. Speichern oder Cancel machen das Formular wieder sauber. Ausprobieren: hier ein Feld ändern, dann links eine Seite anklicken
SavingSpeichern: Save fires form-save on the form and makes the current values the saved ones: leaving needs no question afterwards and Cancel goes back to the last saved valuesSave löst form-save am Formular aus und macht die aktuellen Werte zu den gespeicherten: Verlassen braucht danach keine Rückfrage, und Cancel geht auf die zuletzt gespeicherten Werte zurück
Changes outside fieldsÄnderungen außerhalb von Feldern: When the changes are not form fields (e.g. undo steps in an editor), setDirty(element) or the data-discard-dirty attribute marks the page as changed; Discard clears itSind die Änderungen keine Formularfelder (z. B. Undo-Schritte in einem Editor), markiert setDirty(element) oder das Attribut data-discard-dirty die Seite als geändert; Discard setzt es zurück
In-page viewsAnsichten in der Seite: Views switched without a page load call guardLeave(next) from discard-guard; buttons that leave get data-guard-leave; after an own save dispatch discard-guard-reset on the formAnsichten, die ohne Seitenladen wechseln, rufen guardLeave(next) aus discard-guard auf; Buttons, die die Seite verlassen, bekommen data-guard-leave; nach eigenem Speichern discard-guard-reset am Formular auslösen

Add station

Station

Station name

Shown on the map and in orders.

Role

Note (optional)

0 / 500

Timing

Start

End

Wait time

s

Max. speed (optional)

m/s

Bulk form

UseVerwendung: Creating several items of the same kind at once, e.g. users; one form row per item, up to a fixed numberMehrere gleichartige Einträge auf einmal anlegen, z. B. Nutzer; eine Formularzeile pro Eintrag, bis zu einer festen Anzahl
Built fromAufgebaut aus: Form layout with one Box per row (“User 1”, “User 2” …) and the guide fields inside: Input, Single select, Date selector, Toggle, Checkbox, Multi selectForm-Layout mit einer Box pro Zeile („User 1“, „User 2“ …) und den Guide-Feldern darin: Input, Single Select, Date Selector, Toggle, Checkbox, Multi Select
ChecksPrüfungen: Email fields check the format and addresses already in use when leaving the field and on Save, never while typing; the error sits under the field and Save says whyE-Mail-Felder prüfen Format und bereits vergebene Adressen beim Verlassen des Felds und beim Speichern, nie während der Eingabe; der Fehler steht unter dem Feld und Save nennt den Grund
CheckboxCheckbox: Optional info icon with a tooltip next to the label; an optional warning Notify appears below while it is checkedOptionales Info-Icon mit Tooltip neben dem Label; eine optionale Warn-Notify erscheint darunter, solange sie angehakt ist
Show only whenNur anzeigen, wenn: A field can hide depending on another field of the same row, e.g. Start date, Vehicles and MaaS disappear for the role SuperuserEin Feld kann sich abhängig von einem anderen Feld derselben Zeile ausblenden, z. B. verschwinden Start date, Vehicles und MaaS bei der Rolle Superuser
ExtrasExtras: An app can add its own pieces to every row; they sit at the end of the row gridEine App kann jeder Zeile eigene Teile hinzufügen; sie stehen am Ende des Zeilenrasters
RowZeile: Fields in a grid: 4 columns from 1280 px, 2 from 768 px, 1 on phones; 16 px gapsFelder in einem Raster: 4 Spalten ab 1280 px, 2 ab 768 px, 1 auf Smartphones; 16 px Abstand
AddHinzufügen: Secondary button “Add user” with plus icon below the last row; at the limit it is disabled with the reason as tooltipSecondary-Button „Add user“ mit Plus-Icon unter der letzten Zeile; am Limit deaktiviert mit dem Grund als Tooltip
RemoveEntfernen: Tertiary button “Remove user” with trashcan at the end of every row but the first; the rows renumberTertiary-Button „Remove user“ mit Mülleimer am Ende jeder Zeile außer der ersten; die Zeilen werden neu nummeriert
Same for allFür alle gleich: Box above the rows with one toggle per shared field (“Same company”); when on, only the first row shows that field and every row uses its valueBox über den Zeilen mit einem Toggle pro gemeinsamem Feld („Same company“); wenn an, zeigt nur die erste Zeile das Feld und alle Zeilen übernehmen seinen Wert
SaveSave: Disabled with the reason of the first missing value until every shown row is complete; hidden fields never blockDeaktiviert mit dem Grund des ersten fehlenden Werts, bis jede sichtbare Zeile vollständig ist; ausgeblendete Felder blockieren nie
CancelAbbrechen: Empties the form and goes back to one rowLeert das Formular und geht auf eine Zeile zurück
LeavingVerlassen: With unsaved values, leaving the page asks first with the Discard modal; after Discard the form is empty and counts as unchangedMit ungespeicherten Werten fragt das Verlassen der Seite zuerst mit dem Discard-Modal; nach Discard ist das Formular leer und gilt als unverändert

Try it — add users, switch on a “Same” toggle, pick Superuser, check Local user, type a taken email and saveAusprobieren – Nutzer hinzufügen, einen „Same“-Toggle einschalten, Superuser wählen, Local user anhaken, eine vergebene E-Mail eingeben und speichern

Create up to 5 users at once.

Create users

Same for all users

User 1

First name

Last name

Email

Local user

Company

Role

Start date

Vehicles

User 2

First name

Last name

Email

Local user

Company

Role

Start date

Vehicles

Assignment list

Every caseAlle Fälle

	ExampleBeispiel
EntriesEinträge	Assigned vehicles 2026-11-01 · Falcon (2140137) · Union North 2026-11-01 · Nimbus (2140174) · Union North 2026-11-15 · Orbit (2140211) · Union South
Hover ×Hover ×	Assigned vehicles 2026-11-01 · Falcon (2140137) · Union North 2026-11-01 · Nimbus (2140174) · Union North 2026-11-15 · Orbit (2140211) · Union South
EmptyLeer	Assigned vehicles No vehicles assigned yet.
Read-onlySchreibgeschützt	Assigned vehicles 2026-11-01 · Falcon (2140137) · Union North 2026-11-01 · Nimbus (2140174) · Union North 2026-11-15 · Orbit (2140211) · Union South

Try it — remove an entry, copy, clear and undo, or copy two serials and paste themAusprobieren – einen Eintrag entfernen, kopieren, leeren und rückgängig machen, oder zwei Seriennummern kopieren und einfügen

Assigned vehicles

2026-11-01 · Falcon (2140137) · Union North
2026-11-01 · Nimbus (2140174) · Union North
2026-11-15 · Orbit (2140211) · Union South

Field group

Every caseAlle Fälle

	ExampleBeispiel
Start · endStart · Ende	Start End
Min · maxMin · Max	Min kg Max kg

Try it — set the end before the startAusprobieren – Ende vor den Start setzen

Shift

Start

End

Min

kg

Max

kg

File import

UseVerwendung: “Import [object]” in forms, modals and offcanvas, one file at a time; never “Upload”„Import [object]“ in Formularen, Modals und Offcanvas, eine Datei auf einmal; nie „Upload“
AreaFläche: Dashed 1 px secondary-500 frame, radius 16 px, at least 96 px high, full field width up to 400 px; upload icon 24 px, one line of text and the secondary button “Choose file”, centered, 8 px apartGestrichelter 1-px-secondary-500-Rahmen, 16 px Radius, mindestens 96 px hoch, volle Feldbreite bis 400 px; Upload-Icon 24 px, eine Textzeile und der Secondary-Button „Choose file“, zentriert, 8 px Abstand
Label and hintLabel und Hinweis: Field label above; the accepted types and the size limit below as the hint (“CSV or XLSX, up to 10 MB”)Feldlabel darüber; die erlaubten Typen und die Größengrenze darunter als Hinweis („CSV or XLSX, up to 10 MB“)
HoverHover: Frame secondary-900Rahmen secondary-900
Dragging overBeim Darüberziehen: Secondary-100 surface, frame secondary-900; the text says “Drop the file to import it”Secondary-100-Fläche, Rahmen secondary-900; der Text sagt „Drop the file to import it“
KeyboardTastatur: The button is the tab stop and opens the file chooser with Enter or Space; dragging is never the only wayDer Button ist der Tab-Stopp und öffnet die Dateiauswahl mit Enter oder Leertaste; Ziehen ist nie der einzige Weg
ImportingImportiert: File icon, the progress bar with the file name and a dark inset × “Cancel import”; focus moves to the ×Datei-Icon, die Progress bar mit dem Dateinamen und ein dunkles Inset-× „Cancel import“; der Fokus springt auf das ×
DoneErledigt: Success icon with “Imported” and the file as an input chip with name and size; its × removes the file and brings the area backErfolgs-Icon mit „Imported“ und die Datei als Input-Chip mit Name und Größe; sein × entfernt die Datei und holt die Fläche zurück
ErrorsFehler: Only what can’t be prevented: a wrong file type or a file that is too big, checked as soon as the file is dropped or chosen; error frame and the message in place of the hint, saying what to doNur was sich nicht verhindern lässt: ein falscher Dateityp oder eine zu große Datei, geprüft sobald die Datei abgelegt oder gewählt ist; Fehlerrahmen und die Meldung anstelle des Hinweises, die sagt, was zu tun ist
DisabledDeaktiviert: secondary-100 surface, secondary-300 frame, secondary-400 text; the reason as a tooltipsecondary-100-Fläche, secondary-300-Rahmen, secondary-400-Text; der Grund als Tooltip
Screen readersScreenreader: The file input carries the label and the hint or error; progress and result are announcedDas Datei-Input trägt Label und Hinweis oder Fehler; Fortschritt und Ergebnis werden angesagt

Every stateAlle Zustände

	ExampleBeispiel
DefaultStandard	Vehicle list Drag a file here or CSV or XLSX, up to 10 MB
HoverHover	Vehicle list Drag a file here or CSV or XLSX, up to 10 MB
FocusFokus	Vehicle list Drag a file here or CSV or XLSX, up to 10 MB
Dragging overBeim Darüberziehen	Vehicle list Drop the file to import it CSV or XLSX, up to 10 MB
ImportingImportiert	Vehicle list vehicles-union-north.csv45 % Importing… CSV or XLSX, up to 10 MB
DoneErledigt	Vehicle list Importedvehicles-union-north.csv · 24 KB CSV or XLSX, up to 10 MB
Wrong typeFalscher Typ	Vehicle list Drag a file here or This file type can’t be imported. Choose a CSV or XLSX file.
Too bigZu groß	Vehicle list Drag a file here or This file is larger than 10 MB. Split it or remove columns you don’t need.
Disabled · reasonDeaktiviert · Grund	Vehicle list Drag a file here or CSV or XLSX, up to 10 MB Only fleet admins can import vehicles

Try it — drop or choose a CSV or XLSX file up to 10 MBAusprobieren – eine CSV- oder XLSX-Datei bis 10 MB ablegen oder wählen

Vehicle list

Drag a file here or

CSV or XLSX, up to 10 MB

Inline edit

UseVerwendung: Renaming one thing right where it is shown, e.g. a board name in the page header; forms use the InputEine Sache genau dort umbenennen, wo sie steht, z. B. einen Board-Namen im Seitenkopf; Formulare nutzen das Input
DisplayAnzeige: The text with a 16 px edit icon after it, 8 px apart; 32 px high with the 40 px hit area; the 8 px padding sits outside the text line, so the text stays alignedDer Text mit einem 16-px-Bearbeiten-Icon dahinter, 8 px Abstand; 32 px hoch mit 40-px-Trefferfläche; die 8 px Innenabstand liegen außerhalb der Textlinie, damit der Text bündig bleibt
HoverHover: Primary-200 behind text and icon, pointer hand, tooltip with the action (“Rename board”)Primary-200 hinter Text und Icon, Zeigerhand, Tooltip mit der Aktion („Rename board“)
EditingBearbeiten: A click, Enter or Space turns it into a field (FieldBox) with the same text size and everything selected; full width up to 400 pxEin Klick, Enter oder Leertaste macht daraus ein Feld (FieldBox) in gleicher Textgröße, alles markiert; volle Breite bis 400 px
SaveSave: Enter or leaving the field saves; an unchanged or empty value just closes and keeps the old oneEnter oder Verlassen des Felds speichert; ein unveränderter oder leerer Wert schließt nur und behält den alten
CancelAbbrechen: Esc restores the old value and closes; focus returns to the textEsc stellt den alten Wert wieder her und schließt; der Fokus kehrt zum Text zurück
Maximum lengthMaximale Länge: Counter 17 / 30 below the field while editing; typing stops at the maximum, never redZähler 17 / 30 unter dem Feld beim Bearbeiten; Tippen stoppt am Maximum, nie rot
ErrorsFehler: Only what can’t be prevented (name already taken, server error), checked on Enter and when leaving; error frame, icon and message below; the field stays open until it is fixed or EscNur was sich nicht verhindern lässt (Name schon vergeben, Serverfehler), geprüft bei Enter und beim Verlassen; Fehlerrahmen, Icon und Meldung darunter; das Feld bleibt offen, bis es behoben ist oder Esc
DisabledDeaktiviert: secondary-400 text, no icon, no hover; the reason as a tooltipsecondary-400-Text, kein Icon, kein Hover; der Grund als Tooltip
Screen readersScreenreader: The text is a button named “Rename board: [name]”; the field has the label; “Board renamed” is announced after savingDer Text ist ein Button namens „Rename board: [name]“; das Feld hat das Label; „Board renamed“ wird nach dem Speichern angesagt

Every stateAlle Zustände

	DefaultStandard	HoverHover	FocusFokus
HeadlineÜberschrift
TextText

EditingBearbeiten

	EditingBearbeiten	ErrorFehler	DisabledDeaktiviert
HeadlineÜberschrift	26 / 30	A board with this name already exists. 17 / 30

Try it — rename the board; “Shift B dashboard” is already takenAusprobieren – das Board umbenennen; „Shift B dashboard“ ist schon vergeben

Code block

UseVerwendung: Code, JSON, logs and other machine text to read, copy or download; editable only where people really write it (e.g. a JSON configuration)Code, JSON, Logs und anderer Maschinentext zum Lesen, Kopieren oder Herunterladen; bearbeitbar nur, wo Menschen ihn wirklich schreiben (z. B. eine JSON-Konfiguration)
Read-onlySchreibgeschützt: Default: field frame in the read-only look, secondary-100 surface, no border, radius 12 px; stays in the tab order so it can be scrolled with the keyboardStandard: Feldrahmen im Read-only-Look, Fläche secondary-100, kein Rahmen, Radius 12 px; bleibt in der Tab-Reihenfolge, damit er mit der Tastatur gescrollt werden kann
EditableBearbeitbar: editable: the textarea look of the fields (white, 1 px secondary-500, hover secondary-900, focus ring 2 px), resize handle bottom righteditable: der Textarea-Look der Felder (weiß, 1 px secondary-500, Hover secondary-900, Fokusring 2 px), Größengriff unten rechts
TextText: 14 px Geist Mono Light, secondary-900, 6 px top and bottom, 12 px sides; tabs and spaces stay as they are14 px Geist Mono Light, secondary-900, 6 px oben und unten, 12 px seitlich; Tabs und Leerzeichen bleiben, wie sie sind
Long linesLange Zeilen: Scroll sideways by default; wrap breaks long lines (logs, single long values)Standardmäßig seitlich scrollen; wrap bricht lange Zeilen um (Logs, einzelne lange Werte)
HeightHöhe: Grows with the content up to 320 px, then scrollsWächst mit dem Inhalt bis 320 px, dann scrollt er
ActionsAktionen: copy and download add 24 px inset icon buttons at the top right inside the frame (dark tertiary): Copy shows the tooltip Copied and the success toast “Copied to clipboard”; Download [file] saves the text as that filecopy und download fügen 24-px-Inset-Icon-Buttons oben rechts im Rahmen hinzu (dark tertiary): Copy zeigt den Tooltip Copied und den Erfolgs-Toast „Copied to clipboard“; Download [Datei] speichert den Text als diese Datei
ErrorsFehler: Only when editable and the text can’t be used (e.g. invalid JSON): error frame, error icon and message below, checked when leaving the field and on SaveNur wenn bearbeitbar und der Text nicht verwendbar ist (z. B. ungültiges JSON): Fehlerrahmen, Fehlericon und Meldung darunter, geprüft beim Verlassen des Felds und bei Save

Read-onlySchreibgeschützt

	DefaultStandard	FocusFokus
With actionsMit Aktionen	Result data { "run": 4120, "test": "Brake test", "vehicle": { "name": "Falcon", "serial": "2140137" }, "result": "passed", "steps": [ { "name": "Accelerate to 1.2 m/s", "durationMs": 1840, "ok": true }, { "name": "Emergency brake", "durationMs": 420, "ok": true, "stoppingDistanceMm": 312 } ] }	Result data { "run": 4120, "test": "Brake test", "vehicle": { "name": "Falcon", "serial": "2140137" }, "result": "passed", "steps": [ { "name": "Accelerate to 1.2 m/s", "durationMs": 1840, "ok": true }, { "name": "Emergency brake", "durationMs": 420, "ok": true, "stoppingDistanceMm": 312 } ] }

DefaultStandard

FocusFokus

With actionsMit Aktionen

Result data

{
  "run": 4120,
  "test": "Brake test",
  "vehicle": {
    "name": "Falcon",
    "serial": "2140137"
  },
  "result": "passed",
  "steps": [
    {
      "name": "Accelerate to 1.2 m/s",
      "durationMs": 1840,
      "ok": true
    },
    {
      "name": "Emergency brake",
      "durationMs": 420,
      "ok": true,
      "stoppingDistanceMm": 312
    }
  ]
}

Result data

{
  "run": 4120,
  "test": "Brake test",
  "vehicle": {
    "name": "Falcon",
    "serial": "2140137"
  },
  "result": "passed",
  "steps": [
    {
      "name": "Accelerate to 1.2 m/s",
      "durationMs": 1840,
      "ok": true
    },
    {
      "name": "Emergency brake",
      "durationMs": 420,
      "ok": true,
      "stoppingDistanceMm": 312
    }
  ]
}

EditableBearbeitbar

	DefaultStandard	HoverHover	FocusFokus	ErrorFehler
JSONJSON	Configuration { "speed": 1.2, "load": 850 }	Configuration { "speed": 1.2, "load": 850 }	Configuration { "speed": 1.2, "load": 850 }	Configuration { "speed": 1.2, "load": } Invalid JSON in line 3: a value is missing after "load"

Try it — scroll, copy or download the JSONAusprobieren – das JSON scrollen, kopieren oder herunterladen

Result data

{
  "run": 4120,
  "test": "Brake test",
  "vehicle": {
    "name": "Falcon",
    "serial": "2140137"
  },
  "result": "passed",
  "steps": [
    {
      "name": "Accelerate to 1.2 m/s",
      "durationMs": 1840,
      "ok": true
    },
    {
      "name": "Emergency brake",
      "durationMs": 420,
      "ok": true,
      "stoppingDistanceMm": 312
    }
  ]
}

Long log line, wrappedLange Logzeile, umgebrochen

Log

2026-11-10 09:12:04 INFO  Brake test started on Falcon (2140137) with a load of 850 kg, target speed 1.2 m/s, safety field profile "warehouse-default"

Version 4.2

Version 4.2

Version 4.2

Link

Same for all users

User 1

User 2

User 3

User 4

User 5