## Inputs

Line inputs are based on Material design style inputs. They include useful elements like hint text `.sd-line-input__hint`, error messages `.sd-line-input__message` and character count `.sd-line-input__char-count`.

Example Markup

// Input with hint text and character count

Headline
00/90
This is a hint text. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

// Required input field

Description
Hendrerit in vulputate velit esse molestie consequat.

// Input with error message

Description
This field is required.

// Disabled input

Disabled input
This field is disabled.

// Input with no dedicated space for the hint text at the bottom

No margin below

// File input

File input

// Color input

Color input
{{test}}

// Alternative styling

An alternative styling for input fields is available in cases where the whole filed needs to be visible. The style is applied by appending `.sd-line-input--boxed` to the default classes.

Description
Vulputate velit esse molestie consequat.
Disabled
This field is disabled.

                            Headline

                            00/90
                            This is a hint text. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

                            Description

                            Hendrerit in vulputate velit esse molestie consequat.

                            Description

                            This field is required.

                            Disabled input

                            This field is disabled.

                                No margin below

                                Color input

                                    {{test}}

                            Description

                            Vulputate velit esse molestie consequat.

                            Disabled

                            This field is disabled.

### Input with label on the left

Athough displaying labels above the input is the desired option in Superdesk, in some cases this is not optimal. In those cases it is posible to displaying the label at the same line as the input, on the left, by adding modifier classes. Two options are available: `.sd-line-input--label-left`, with a predefined minimal width for the label, and `.sd-line-input--label-left-auto` with no predifined label width.

Example Markup

// Predefined label width

Usage: stacked inputs where space is limited (use form__row as a container if extra space between rows is neede).

Label one
00/90
This is a hint text. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
Label two Hint text. Dolor in hendrerit in vulputate velit esse molestie consequat.

// No predefined label width

Usage: single input fields e.g. in subnavigation bars and similar.

Label

                                Label one

                                00/90
                                This is a hint text. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

                                Label two

                                Hint text. Dolor in hendrerit in vulputate velit esse molestie consequat.

                                Label

### Other modifiers

- `.sd-line-input--no-label`
  Removes the top padding reserved for the label. Use in case there is no label needed.

- `.sd-line-input--no-margin`
  Removes the bottom margin where otherwise the hint text apears.

- `.sd-line-input--with-button`
  Adds space before the input for the [+] `.sd-line-input__plus-btn` button.

- `.sd-line-input--with-button`
  Adds space before the input for the [+] button.