Several basic Inputs are bundled in a single NPM package npm install @tis-cca/form-grid.
The following inputs are included in the form-grid package:
Input
Select
Textarea
Date Input
The following inputs are distributed as individual packages:
Checkboxes - npm install @tis-cca/checkbox
Radiobuttons - npm install @tis-cca/radiobuttons
Input static (readonly lookalike)
An input that is in a readonly state. Readonly inputs should be used if content should look like an input but use of a "real" input is not desireable or feasible. An alternative is simple setting the input in a "disabled" state.
An Input that the user (currently) can't edit, but is allowed to copy text from.
<div class="inventory-cell__element">
<label class="inventory-cell__label">Input-Label</label>
<input class="inventory-cell__input" value="this text can be copied" readonly>
</div>
Input edit
A regular text input that the user (currently) can edit.
To warn the user that there is a problem with the data in the input field, the class inventory-cell__element--error needs to be set on the wrapping inventory-cell__element.
Common use-cases for this are:
The input is required but was not filled in by the user prior to saving.
The format of the inputted data is not allowed for this specific input field.
Server-side validation respond that the data inputted is somehow invalid.
The optional inventory-cell__error element should be used to give the user instructions what triggered the error state and what he/she can do to remedy that.
Error text to let the user know what he has done wrong.
<div class="inventory-cell__element inventory-cell__element--error">
<label class="inventory-cell__label">Input-Label</label>
<input class="inventory-cell__input">
<div class="inventory-cell__error">
<span>Error text to let the user know what he has done wrong.</span>
</div>
</div>
Input edit (states required + error)
Error text to let the user know what he has done wrong.
<div class="inventory-cell__element inventory-cell__element--required inventory-cell__element--error">
<label class="inventory-cell__label">Input-Label</label>
<input class="inventory-cell__input">
<div class="inventory-cell__error">
<span>Error text to let the user know what he has done wrong.</span>
</div>
</div>
Input with right alignment (for numbers)
Use inventory-cell__input--align-right modifier if you have multiple inputs or static fields that are aligned vertically and contain numbers.
The --align-right modifier can only be used on the following types of form-fields:
All basic input elements (input, select) can be put in groups. This should be done if it is desired that multiple inputs appear as a single row in the form-grid layout.
Input Group readonly
In it's most basic form, both inputs share a single label.
Append elements can be used similar to sublabels to categorize the content of the input field. Because the also limit the space available in the input field, these are especially suited for short numbers.
Use a date input to help users entering dates as well as prevent them from entering invalid dates.
Component structure
At it's core, the date-input does consist of two inputs:
a date input field inventory-cell__input-date-field
a date picker (that opens a picker popup) inventory-cell__input-date-datepicker
Attention It is important to keep these two separate input fields in sync. Entering a date in one of them should always apply the same date to the other input.
Focus
The datepicker (inventory-cell__input-date-datepicker) should not receive focus when the users navigates the form by pressing the [TAB] key.
Supported date formats
Supported characters in the date input field:
All numbers
. (period)
Valid date input formats:
TT.MM.JJJJ
Example: 07.05.2021
TTMMJJJJ
Example: 07052021
TTMMJJ
Example: 070521
TT => will be autocompleted
TT.MM => will be autocompleted
TTMM => will be autocompleted
Autocompleting dates
If dates are only entered partially, they should be autocompleted once the input field loses focus or the users presses [ENTER]:
TTMMJJJJ => TT.MM.JJJJ
Example: 07052021 => 07.05.2021
TT.XX.XXXX => TT.{current month}.{current year}
Example: 07.XX.XXXX => 07.05.2021
TT.MM.XXXX => TT.MM.{current year}
Example: 07.05.XXXX => 07.05.2021
Keyboard shortcuts
The following keyboard shortcuts should be supported:
[CTRL] + [.] => sets the date to the current date (current day + month + year).
[TAB] focuses the next input field (should ignore the date-picker element!)
[SHIFT] + [TAB] focuses the previous input field
[SPACE] opens the datepicker popup
[ESC] closes the datepicker popup
[ENTER] when datepicker popup is open: accepts the currently selected date and closes the popup
[ENTER] when the input field is focused and a partial date is already entered: autocompletes the date according to the previous section.
Use a time input to help users entering times as well as prevent them from entering invalid times.
Usage
The following properties of the native html input are not well supported by all browsers and should not be used:
min
max
datalist to show suggested times
Time Input
<div class="tca-button-group">
<button class="tca-button" onclick="ToggleTimeInputDisabled()">Toggle disabled</button>
<button class="tca-button" onclick="ToggleTimeInputRequired()">Toggle required</button>
<button class="tca-button" onclick="ToggleTimeInputError()">Toggle error</button>
<button class="tca-button" onclick="ToggleTimeInputReadonly()">Toggle readonly</button>
</div>
<div class="mdc-layout-grid inventory-grid">
<div class="mdc-layout-grid__inner inventory-grid__inner">
<div class="inventory-cell mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-4-tablet">
<div class="inventory-cell__element" id="time-input-validation-example">
<label class="inventory-cell__label">Input-Label</label>
<input class="inventory-cell__input-time" type="time" id="time-input-disabled-example">
</div>
</div>
</div>
</div>
<script>
function ToggleTimeInputDisabled() {
var x = document.getElementById('time-input-disabled-example');
x.toggleAttribute("disabled");}
function ToggleTimeInputRequired() {
var x = document.getElementById('time-input-validation-example');
x.classList.toggle("inventory-cell__element--required");}
function ToggleTimeInputError() {
var x = document.getElementById('time-input-validation-example');
x.classList.toggle("inventory-cell__element--error");}
function ToggleTimeInputReadonly() {
var x = document.getElementById('time-input-disabled-example');
x.toggleAttribute("readonly");}
</script>
Select
Select inputs offer predefined values for the user to choose from.
Selects are distributed as part of the npm install @tis-cca/form-grid package
If a user should be able to input their own data as well as choose from suggestions, use a combobox element instead.
Select readonly
A select element that is in a readonly state. Readonly inputs should be used if content should look like an input but use of a "real" input is not desireable or feasible. An alternative is simple setting the input in a "disabled" state.
Checkboxes allow the user to declare choices between options
Checkboxes can have the following states:
checked
unchecked
disabled
indeterminate
This is a state in which it's impossible to say whether the item is toggled on or off.
The usecase for this is when a checkbox is available that "owns" a number of sub-options (which are also checkboxes). If all of the sub-options are checked, the owning checkbox is also checked, and if they're all unchecked, the owning checkbox is unchecked. If any one or more of the sub-options have a different state than the others, the owning checkbox is in the indeterminate state.
Usage in Angular projects
If you are using checkboxes in an Angular project, there is an NPM package available that contains bindings and logic. This also allows you to use a simplified DOM structure.
@tis-cca/ui-angular
<div class="tca-button-group">
<button class="tca-button" onclick="toggleindeterminate1()">Set checkbox indeterminate</button>
<button class="tca-button" onclick="togglecheckboxdisabled()">Toggle disabled</button>
<button class="tca-button" onclick="togglecheckboxrequired()">Toggle required</button>
<button class="tca-button" onclick="togglecheckboxerror()">Toggle error</button>
</div>
<div class="inventory-cell__element" id="checkbox-inventory-cell__element">
<div class="inventory-cell__element-group inventory-cell__element-group--without-label">
<div class="mdc-checkbox" id="basic-mdc-checkbox">
<input type="checkbox" id="native-html-checkbox" class="mdc-checkbox__native-control"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
<label class="inventory-cell__checkbox-label" for="native-html-checkbox">Checkbox-Label</label>
</div>
</div>
<script type="text/javascript">
function toggleindeterminate1() {
var checkbox = document.getElementById("native-html-checkbox");
checkbox.indeterminate = true;}
function togglecheckboxdisabled() {
var x = document.getElementById("basic-mdc-checkbox");
x.classList.toggle("mdc-checkbox--disabled");
var y = document.getElementById("native-html-checkbox");
y.toggleAttribute("disabled");}
function togglecheckboxrequired() {
var x = document.getElementById("checkbox-inventory-cell__element");
x.classList.toggle("inventory-cell__element--required");}
function togglecheckboxerror() {
var x = document.getElementById("checkbox-inventory-cell__element");
x.classList.toggle("inventory-cell__element--error");}
</script>
Checkbox readonly
A checkbox-like element that is in a readonly state. Readonly checkboxes should be used if content should look like an input but use of a "real" input is not desireable or feasible. An alternative is simple setting the input in a "disabled" state.
textareas are multi-line plain-text editing controls, useful when you want to allow users to enter a sizeable amount of free-form text.
Textarea readonly
A textarea element that is in a readonly state. Readonly textareas should be used if content should look like an input but use of a "real" textarea is not desireable or feasible. An alternative is simple setting the input in a "disabled" state.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<div class="inventory-cell__element">
<label class="inventory-cell__label">Textarea-Label</label>
<span class="inventory-cell__static inventory-cell__static-textbox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span>
</div>
Textarea - edit
Textareas can have the following states:
required - use inventory-cell__element--required on the wrapping inventory-cell__element.
error - use inventory-cell__element--error on the wrapping inventory-cell__element.
disabled - use the html disabled="" attribute.
readonly - use the html readonly attribute. The textarea can then sill receive focus.
Radiobuttons are distributed as part of the npm install @tis-cca/radiobuttons package
Radio buttons are designed for selecting one value out of a set, whereas checkboxes let you turn individual values on and off. Where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.
Ein einfacher Toggle Schalter. Er wird dann eingesetzt, wenn Nutzer eine Funktion aktivieren oder deaktivieren können.
Im Unterschied zu Radiobuttons gibt es also keine Auswahl zwischen zwei Optionen, es verändert sich lediglich der Status einer Option (An/Aus)
Ein Toggle besitzt immer auch ein Label welches die Option beschreibt dessen Status sich verändern soll
Hat das Deaktiviert sein der Option negative Auswirkungen (z.B.: Login mit Passwort: Ja/Nein), soll auf das Label der Modifier --warning angewandt werden.
All button variants can be modified by using modifier classes or attributes. This should be done, to give users an early hint what type of actions follows clicking the button.
This follows the scheme: .{button-basis-class} + .{button-modifier-class}
The .tca-button--disabled modifier can be used togehter with each other modifier.
Alternatively, the [disabled] attribute can be used if usage of a class is not desired/possible.
Modifier
Description
Examples
.tca-button--danger
Should be used, when clicking the button has severe, maybe unwanted/unexpected consequences.
Deleting content/files; Dismissing a call; Canceling of an update
.tca-button--create
Signals the user, that something will be created.
Creating new content/files
.tca-button--disabled
Shows the user that the button can't be interacted with.
User has not yet filled out all required fields in a form; All filters have been removed.
[disabled]
Shows the user that the button can't be interacted with. Can be used as an alternativ to the class method mentioned above.
User has not yet filled out all required fields in a form; All filters have been removed.
Attention This won't have an effect on buttons on mobile devices and full-width buttons.
<button class="tca-button-outline" onclick="ToggleButtonGroupDialogActions()">Dialog Actions Modifier</button>
<div class="tca-button-group" id="button-group-demo">
<button class="tca-button">Button in Group #1</button>
<button class="tca-button">Button with longer text in Group #2</button>
<button class="tca-button">Button #3</button>
<button class="tca-button">Button in Group #4</button>
<button class="tca-button">Button in Group #5</button>
<button class="tca-button">Button with longer text in Group #6</button>
</div>
<script>
function ToggleButtonGroupDialogActions() {
var x = document.getElementById('button-group-demo');
x.classList.toggle("tca-button-group--dialog-actions");}
</script>
Example: Buttons in a guided process
The button that allows the user to advance in the guide process should be on the outer right (or last on mobile devices).
Example: Decision where the user's attention should be directed towards one of the options.
Welches Paket möchten Sie buchen?
Example: Choice between multiple equally weighted options.
Wann soll der Termin stattfinden?
Button für weniger wichtige Aktionen
Dieser Button ist für weniger wichtige Interaktionen des Nutzers gedacht.
Buttons that should use the full width of its container, should use the modifier class tca-button--full-width.
<div class="tca-button-group">
<button class="tca-button tca-button--full-width">Button full width</button>
<button class="tca-button-outline tca-button--full-width">Button outline full width</button>
<button class="tca-button-text tca-button--full-width">Button text full width</button>
</div>
Button mit Icon nach dem Text
Dieser Button ist für wesentliche Interaktionen des Nutzers gedacht.
Use a these buttons as soon as you can reasonably expect the action that the button triggers takes longer than 3 seconds and you don't display any other progress indicators (progress-bar, spinner with text etc.) to the user.
Usage in default buttons
Add the tca-button--spinner modifier to the button element.
Add a tca-spinner child element of the button.
Add the tca-button--spinner-in-progress modifier to the button element to display the spinner in progress.
Usage in buttons that contain icons
Add the tca-button--spinner modifier to the button element.
Add the markup of the icon like you would do with a regular button that contains an icon.
Add the tca-button--spinner-in-progress modifier to the button element to display the spinner in progress.
Replace the icon (e.g. icon-arrow) with the tca-spinner.
<div class="tca-button-group">
<button class="tca-button tca-button--spinner" onclick="ToggleButtonInProgressWithoutIcon()" id="button-in-progress-demo-without-icon-1">Speichern
<i class="tca-spinner"></i>
</button>
<button class="tca-button-outline tca-button--spinner tca-button--spinner-left" onclick="ToggleButtonInProgressWithIconLeft()" id="button-in-progress-demo-with-icon-left-1">Zurück
<i class="icon-arrow-left tca-button__icon tca-button__icon--left" id="button-in-progress-demo-with-icon-left-2"></i>
</button>
<button class="tca-button tca-button--spinner" onclick="ToggleButtonInProgressWithIcon()" id="button-in-progress-demo-with-icon-1">Weiter
<i class="icon-arrow-right tca-button__icon tca-button__icon--right" id="button-in-progress-demo-with-icon-2"></i>
</button>
</div>
<script>
function ToggleButtonInProgressWithoutIcon() {
var x = document.getElementById('button-in-progress-demo-without-icon-1');
x.classList.toggle("tca-button--spinner-in-progress");
}
function ToggleButtonInProgressWithIconLeft() {
var x = document.getElementById('button-in-progress-demo-with-icon-left-1');
x.classList.toggle("tca-button--spinner-in-progress");
var y = document.getElementById('button-in-progress-demo-with-icon-left-2');
y.classList.toggle("tca-spinner");
y.classList.toggle("icon-arrow-left");
}
function ToggleButtonInProgressWithIcon() {
var x = document.getElementById('button-in-progress-demo-with-icon-1');
x.classList.toggle("tca-button--spinner-in-progress");
var y = document.getElementById('button-in-progress-demo-with-icon-2');
y.classList.toggle("tca-spinner");
y.classList.toggle("icon-arrow-right");
}
</script>
Floating Action Buttons (fab)
npm install @tis-cca/floating-action-buttons
Floating action buttons in forms
General
Use a floating action buttons (fabs) in forms when the form itself is larger than a typical users viewport to always display the most important form actions (e.g. saving, cancelling a form).
Usage
Attention Make sure to include some padding/margin at the bottom of your form if you use floating action buttons. This is to ensure, that users can always edit the form fields. Without this, you risk that form fields get overlapped by the fabs.
Recommendation Do not use more than 3 fabs next to each other. If you have a form that has more actions than 3, determine the 2 most important ones and put the rest in an overflow-menu.
If the default horizontal layout is not desired, you can use the tca-fab-wrapper--align-vertically modifier to align the fabs vertically.
Use tca-fab-button--in-progress modifier to show a spinner inside the button
<button class="tca-button" onclick="ToggleFabVisibility()">Show Fab Buttons</button>
<button class="tca-button" onclick="ToggleAlignment()">Toggle Alignment</button>
<button class="tca-button" onclick="inProgress()">Button in Progress</button>
<div class="tca-fab-wrapper" id="fab-demo-1" role="group" aria-label="Floating action buttons" style="display: none;">
<button class="tca-fab-button tca-fab-button--small" title="Abbrechen" onclick="ToggleFabVisibility()">
<span class="icon-cancel"></span>
</button>
<button class="tca-fab-button" title="Speichern (STRG+S)" id="savebutton">
<div class="tca-spinner tca-spinner--in-progress"></div>
<span class="icon-save"></span>
</button>
</div>
<script>
function ToggleFabVisibility() {
var togglefab = document.getElementById('fab-demo-1');
togglefab.style.display = togglefab.style.display == "flex" ? "none": "flex";
}
function ToggleAlignment() {
var togglealignment = document.getElementById('fab-demo-1');
togglealignment.classList.toggle("tca-fab-wrapper--align-vertically");
}
function inProgress() {
var toggleinprogress = document.getElementById('savebutton');
toggleinprogress.classList.toggle("tca-fab-button--in-progress");
}
</script>
File upload
Drag and Dop Area
npm install @tis-cca/upload
Use the tca-multi-upload-drop-area--required modifier to display the drag and drop area as required.
Use the tca-multi-upload-drop-area--error modifier, if the users submits the form, without andy document chosen.
Use the tca-multi-upload--in-progress modifier, to show a spinner, while the file is uploading.
Use the div with the class tca-multi-upload-file__button-wrapper for wrapping actionbuttons to a file
You can use input or drop down below the file, using the inventory-cell__element
If the file is not am image, use the modifier tca-multi-upload-file__preview--xls for xls,
tca-multi-upload-file__preview--pdf for pdf or
tca-multi-upload-file__preview--word for word
If the file is not a pdf, word or xls then use the modifier tca-multi-upload-file__preview--default
