Overview

The field component is a container for an input (checkbox, text field, select etc) and optionally a label and text.

Options

Basic usage

Required fields

See Required fields

Notification indicator

A field can display a notification indicator (dot) by adding the class ds-field --notification.

You can also apply the notification indicator directly to the Label.

Notification indicators adhere to 4x preset visual states - alert, warning, success and info.

Additionally, if the field has an attribute data-notification-counter set to a non-empty value, that value will be shown in the indicator. If the attribute is set to empty data-notification-counter="" the indicator dot will be hidden.

Examples

Multiple inline (joined) controls

File upload with intro text

File upload, banner and intro text

Label, text input with icon and text

Field container with Label and Text input with icon, and Text.

Label, text input with icon and text addon

Field container with Label and Text input with icon, and Text (addon style).

Label, select input with icon and text tip

Field container with Label and Select with icon, and Text (tip style).

Multiple inputs, icon and text addons

Field container with Label and a small and medium size Text input with icon, and Text (addon style).

Multiple fields inside a ds-cols

Inside ds-cols, you can add ds-span --X (1-12) to the ds-field element to adjust the size of the columns.

If a ds-field does not contain a ds-text --label element - extra spacing at the top of the ds-field can be enabled by using ds-field--top-spacer.

Show/Hide password

The following structure is suitable for implementing a show/hide password control.

The example toggles the ds-input attribute from type="text" to type="password" and the ds-button class ds-button --icon-visible to ds-button --icon-hidden.

SDS only includes the styling - it is assumed the logic for switching will be implemented within the project locally.

Datetime —split

Tests