Forms

Forms

Cumulocity users need to add, edit and remove information frequently. Use good looking and flexible form controls to help them achieve their goals.

Basic forms

Default form

Individual form controls receive global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default.

Wrap labels and controls in .form-group for optimum spacing.

Example block-level help text here.

<form action="#">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="e.g. jane.doe@mail.com">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleSelect">Gender</label>
    <div class="c8y-select-wrapper">
      <select id="exampleSelect" class="form-control">
        <option>Select…</option>
        <option>Male</option>
        <option>Female</option>
      </select>
      <span></span>
    </div>
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile" aria-describedby="helpinput" class="form-control">
    <p id="helpinput" class="help-block">Example block-level help text here.</p>
  </div>
  <div class="form-group">
    <label>Gender</label>
    <label class="c8y-radio radio-inline">
      <input type="radio" name="demo-radio-group">
      <span></span> Male
    </label>
    <label class="c8y-radio radio-inline">
      <input type="radio" name="demo-radio-group">
      <span></span> Female
    </label>
  </div>
  <div class="form-group">
    <label class="c8y-checkbox"><input type="checkbox"><span></span> Check me out </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Inline form

Add .form-inline to your form (which doesn't have to be a <form>) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.









,00
<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"> </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"> </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>
<br><br>
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email"> </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"> </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>
<br><br>
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in Euros)</label>
    <div class="input-group">
      <div class="input-group-addon"></div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">,00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Horizontal form

Use predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <label class="c8y-checkbox">
        <input type="checkbox"> Remember me <span></span>
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>

Editable form

Some forms may display as static content. To allow editing, provide a button to toggle the class .form-read-only.

Edit
<form class="form-editable form-read-only">

  <div class="form-group">
    <input id="group-name" type="text" class="form-control" value="Group name">
  </div>
  <div class="form-group">
    <textarea rows="2" class="form-control"  placeholder="add some notes">Some description text.</textarea>
  </div>
  <small  class="text-muted form-edit-btn">
    <a href="" class="form-edit-btn"><i c8y-icon="pencil" class="fa fw fa-pencil"></i> Edit</a>
  </small>

  <div class="form-actions">
    <button type="button" class="btn btn-default">Cancel</button>
    <button type="submit" class="btn btn-primary">Save changes</button>
  </div>

</form>

Text-based input fields

Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Inputs will only be fully styled if their type is properly declared.

On textarea horizontal resizing is disabled. Change rows attribute as necessary.



<form>
  <input type="text" class="form-control" placeholder="Text input">
  <br>
  <input type="number" class="form-control" value="0" step="5">
  <br>
  <textarea class="form-control" rows="6" placeholder="Textarea"></textarea>
</form>

Edit and save in place

A field that can be edited inline will have a pencil icon next to it. The user can either click on the field value or click on the pencil icon to activate inline edit.

When editing the field, two buttons appear to allow saving or disregarding the changes.

Resize using font size.

Editable field

New Test and something more


<!-- TODO: show c8y-ui-title Angular directive and parameters -->
  

Edit on focus

Similar to the previous edit in place, except it doesn't update the record unless the user submits the form. The input is wrapped in a label with a class .editable. It will always take 100% of it's parent container.

<label class="editable">
  <input class="form-control" ng-model="category.label" placeholder="{{category.placeholder}}">
  <span>{{category.label || category.placeholder}}</span>
</label>

Static control

To display plain text next to a form label within a form, use the .form-control-static class on a <p>.

email@example.com



email@example.com

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div>
  </div>
</form>
<br><br>
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">email@example.com</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password"> </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Select

To provide consistency across browsers, override the default styling by wrapping the select element on a .c8y-select-wrapper and add an empty span in the end.

<div class="c8y-select-wrapper">
  <select class="form-control">
    <option>Select…</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
  </select>
  <span></span>
</div>

For controls with the multiple attribute there's no need for extra markup and multiple options are shown by default.

<form>
  <select class="form-control" multiple>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
  </select>
</form>

Checkbox and Radio buttons

Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many. Inputs will only be fully styled if their type is properly declared.

To provide consistency across browsers whenever possible override the default styling. To achieve this, place the input inside the label and add an empty span. Add class c8y-checkbox or c8y-radio to the label and you're good to go.

<label title="Checkbox One" class="c8y-checkbox">
  <input type="checkbox" checked="checked"><span></span> Checkbox One
</label>

<label title="Radio Label" class="c8y-radio">
  <input type="radio" name="c8y-group"><span></span> Radio One
</label>

Inline Checkboxes and radios

Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.




<form>
  <label title="Checkbox One" class="c8y-checkbox checkbox-inline">
    <input type="checkbox" checked="checked">
    <span></span> Checkbox One
  </label>
  <label title="Checkbox Two" class="c8y-checkbox checkbox-inline">
    <input type="checkbox">
    <span></span> Checkbox Two
  </label>
  <label title="Checkbox Three" class="c8y-checkbox checkbox-inline">
    <input type="checkbox">
    <span></span> Checkbox Three
  </label>

</form>
  <br>
<form>
  <label title="Radio Label" class="c8y-radio radio-inline">
    <input type="radio" name="c8y-group">
    <span></span> Radio One
  </label>
  <label title="Radio two" class="c8y-radio radio-inline">
    <input type="radio" name="c8y-group" checked="checked">
    <span></span> Radio Two
  </label>
  <label title="Radio two" class="c8y-radio radio-inline">
    <input type="radio" name="c8y-group">
    <span></span> Radio Three
  </label>
</form>
<br>
<form>
  <label class="checkbox-inline c8y-checkbox input-sm">
    <input type="checkbox" id="inlineCheckbox1" value="option1">
    <span></span> Check 1
  </label>
  <label class="checkbox-inline c8y-checkbox input-sm">
    <input type="checkbox" id="inlineCheckbox2" value="option2">
    <span></span> Check 2
  </label>
  <label class="checkbox-inline c8y-checkbox input-sm">
    <input type="checkbox" id="inlineCheckbox3" value="option3">
    <span></span> Check 3
  </label>
</form>
<br>
<form>
  <label class="radio-inline c8y-radio input-sm">
    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
    <span></span> Option 1
  </label>
  <label class="radio-inline c8y-radio input-sm">
    <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
    <span></span> Option 2
  </label>
  <label class="radio-inline c8y-radio input-sm">
    <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
    <span></span> Option 3
  </label>
</form>

Should you have no text within the <label>, the input is positioned as you'd expect. Only works on non-inline checkboxes and radios. Remember to still provide some form of label for assistive technologies (for instance, using title).

<form>
  <label class="c8y-checkbox input-sm" title="Checkbox without label text">
    <input type="checkbox">
    <span></span>
  </label>
  <label title="Checkbox" class="c8y-checkbox" title="Checkbox without label text">
    <input type="checkbox" >
    <span></span>
  </label>

  <label class="c8y-radio input-sm" title="Radio button without label text">
    <input type="radio">
    <span></span>
  </label>

  <label title="Radio Label" class="c8y-radio" title="Radio button without label text">
    <input type="radio">
    <span></span>
  </label>
</form>

Range input

Inputs of type range are styled to keep consistency across browsers.

<form>
  <input id="slider1" type="range" min="100" max="500" step="10" >
</form>

Input groups

Extend form controls by adding text or buttons before, after, or on both sides of any text-based input.

Default input-group

Use .input-group with an .input-group-addon or .input-group-btn to prepend or append elements to a single .form-control.

Place one add-on or button on either side of an input. You may also place one on both sides of an input.

@

@example.com

$ .00

https://example.com/users/
<form>
    <div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div>
    <br>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2">@example.com</span> </div>
    <br>
    <div class="input-group"> <span class="input-group-addon">$</span>
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <span class="input-group-addon">.00</span> </div>
    <br>
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
      <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
      <div class="input-group-btn">
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </form>
  

Multiple

Multiple add-ons (.input-group-addon or .input-group-btn) on a single side and multiple form-controls in a single input group are not supported.

Don't mix with other elements

Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.

Input group sizing

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

@

@

@
<form>
    <div class="input-group input-group-lg">
      <span class="input-group-addon" id="sizing-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
    </div>
    <br>
    <div class="input-group">
      <span class="input-group-addon" id="sizing-addon2">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
    </div>
    <br>
    <div class="input-group input-group-sm">
      <span class="input-group-addon" id="sizing-addon3">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
    </div>
  </form>
  

Checkboxes and radio addons

Place any checkbox or radio option within an input group's addon instead of text.



<div class="input-group">
    <span class="input-group-addon">
      <input type="checkbox" aria-label="Checkbox for following text input">
    </span>
    <input type="text" class="form-control" aria-label="Text input with checkbox">
  </div>

  <div class="input-group">
    <span class="input-group-addon">
      <input type="radio" aria-label="Radio button for following text input">
    </span>
    <input type="text" class="form-control" aria-label="Text input with radio button">
  </div>
  

Button addons

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

<!-- Left -->
      <div class="input-group">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">Go!</button>
        </span>
        <input type="text" class="form-control" placeholder="Search for...">
      </div>


    <!-- Right -->
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search for...">
        <span class="input-group-btn">
          <button class="btn btn-primary" type="button"><i class="fa fa-search"></i></button>
        </span>
      </div>

  

Segmented buttons


    <!-- Left -->
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-primary">Action</button>
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="caret"></span>
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
      <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
    </div>
    <!-- right -->
    <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">Action</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="caret"></span>
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
    </div>
  

Fieldsets

The fieldset tag is used to group related elements in a form, the legend tag defines a caption for the element.

For styling we're using pseudo-selectors, which are not available in legend. For this reason replace legend with a div with the class legend.
Pick from 3 different styles: default, left aligned with line, and center aligned with line.

Device info
Device info
Device info
<div class="row">
  <div class="col-sm-4">
    <fieldset>
      <div class="legend"  aria-describedby="Device info" >
        Device info
      </div>
    <div class="form-group">
      <label for="inputHelpBlock2">IMEI</label>
      <input type="text" id="inputHelpBlock2" class="form-control" aria-describedby="helpBlock" placeholder="e.g. 358827059788194">
    </div>
    <div class="form-group">
      <label for="inputHelpBlock2">ICCID</label>
      <input type="text" id="inputHelpBlock3" class="form-control" aria-describedby="helpBlock" placeholder="e.g. 358827059788194">
    </div>
  </fieldset>
  </div>

  <div class="col-sm-4">
    <fieldset>
      <div class="legend form-block"  aria-describedby="Device info" >
        Device info
      </div>
    <div class="form-group">
      <label for="inputHelpBlock2">IMEI</label>
      <input type="text" id="inputHelpBlock2" class="form-control" aria-describedby="helpBlock" placeholder="e.g. 358827059788194">
    </div>
    <div class="form-group">
      <label for="inputHelpBlock2">ICCID</label>
      <input type="text" id="inputHelpBlock3" class="form-control" aria-describedby="helpBlock" placeholder="e.g. 358827059788194">
    </div>
  </fieldset>
  </div>

  <div class="col-sm-4">
    <fieldset>
      <div class="legend form-block center"  aria-describedby="Device info" >
        Device info
      </div>
    <div class="form-group">
      <label for="inputHelpBlock2">IMEI</label>
      <input type="text" id="inputHelpBlock2" class="form-control" aria-describedby="helpBlock" placeholder="e.g. 358827059788194">
    </div>
    <div class="form-group">
      <label for="inputHelpBlock2">ICCID</label>
      <input type="text" id="inputHelpBlock3" class="form-control" aria-describedby="helpBlock" placeholder="e.g. 358827059788194">
    </div>
  </fieldset>
  </div>
</div>

Control height sizing

Besides the default size, you can use taller or shorter form controls that match button sizes by using .input-lg and .input-sm.

Optionally you can add .form-group-sm or .form-group-lg to resize any .form-group.









Example block-level help text here.


<div class="controls">
  <input class="form-control input-lg" type="text" placeholder=".input-lg">
  <br>
  <input type="text" class="form-control" placeholder="Default input">
  <br>
  <input class="form-control input-sm" type="text" placeholder=".input-sm">

  <br>
  <div class="c8y-select-wrapper">
    <select class="form-control input-lg">
      <option value="">.input-lg</option>
    </select>
    <span></span>
  </div>

  <br>
  <div class="c8y-select-wrapper">
    <select class="form-control">
      <option value="">Default select</option>
    </select>
    <span></span>
  </div>
  <br>

  <div class="c8y-select-wrapper">
    <select class="form-control input-sm">
      <option value="">.input-sm</option>
    </select>
    <span></span>
  </div>
  <br>
</div>

Control states

Focus state

We remove the default outline styles on some form controls and apply a border-color in its place for :focus.

Disabled state

Add the disabled boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a not-allowed cursor.

Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent <label>, you'll need to add the .disabled class to the parent .radio, .radio-inline, .checkbox, .c8y-checkbox, or .checkbox-inline.

Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.




Disabled fieldset

<form>
  <div class="form-group">
    <label for="disabledTextInput">Disabled input</label>
    <input class="form-control"
      id="disabledInput"
      type="text"
      placeholder="Disabled input"
      disabled="disabled">
  </div>
  <div class="form-group">
    <label for="disabledSelect">Disabled select</label>
    <div class="c8y-select-wrapper disabled">
      <select class="form-control"
        name=""
        disabled="disabled">
        <option>Disabled Select</option>
      </select>
      <span></span>
    </div>
  </div>

  <label class="c8y-checkbox disabled">
    <input type="checkbox" disabled> <span></span> Disabled checkbox
  </label>
  <br>
  <label class="c8y-radio disabled">
    <input type="radio" disabled> <span></span> Disabled radio button
  </label>
</form>

<form>
  <fieldset disabled="disabled">
    <div class="legend form-block">Disabled fieldset</div>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text"
        id="disabledTextInput"
        class="form-control"
        placeholder="Disabled input"> </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select</label>
      <div class="c8y-select-wrapper">
        <select id="disabledSelect"
          class="form-control">
          <option>Disabled select</option>
        </select>
        <span></span>
      </div>
    </div>

    <label class="c8y-checkbox">
      <input type="checkbox"><span></span> Can't check this
    </label>
    <br>
    <button type="submit"
      class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Cross-browser compatibility

While these styles are applyed in all browsers, Internet Explorer 11 and below don't fully support the disabled attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers.

Readonly state

Add the readonly boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

<form>
  <input class="form-control" type="text" value="Readonly input" readonly="readonly">
</form>

Help text

Block level help text for form controls.

Help text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.

A block of help text.
A really long block of help text that is very long and fit below the input field.
<form>
  <div class="form-group">
    <label for="inputHelpBlock">Input with help text</label>
    <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
    <span id="helpBlock" class="help-block">A really long block of help text that breaks onto a new line and may extend beyond one line.</span>
  </div>
</form>

Validation states

To use validation styles for error, warning, and success states on form controls, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

<div class="row">
  <div class="col-sm-6">
    <form>
      <div class="form-group has-success">
        <label class="control-label" for="inputSuccess1">Input success</label>
        <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
      </div>
      <div class="form-group has-warning">
        <label class="control-label" for="inputWarning1">Input warning</label>
        <input type="text" class="form-control" id="inputWarning1">
      </div>

      <div class="form-group has-error">
        <label class="control-label" for="inputError1">Input error</label>
        <input type="text" class="form-control" id="inputError1">
      </div>
      <div class="row">
        <div class="col-sm-6">
          <div class="has-success">
            <label class="c8y-checkbox">
              <input type="checkbox" id="checkboxSuccess" value="option1"><span></span> Checkbox success
            </label>
          </div>
          <div class="has-warning">
            <label class="c8y-checkbox">
              <input type="checkbox" id="checkboxWarning" value="option1"><span></span> Checkbox warning
              </label>
          </div>
          <div class="has-error">
            <label class="c8y-checkbox">
              <input type="checkbox" id="checkboxError" value="option1"><span></span> Checkbox error
            </label>
          </div>
        </div>

        <div class="col-sm-6">
          <div class="has-success">
            <label class="c8y-radio">
              <input type="radio" id="radioSuccess" value="option1"><span></span> Radio success
            </label>
          </div>
          <div class="has-warning">
            <label class="c8y-radio">
              <input type="radio" id="radioWarning" value="option1"><span></span> Radio warning
            </label>
          </div>
          <div class="has-error">
            <label class="c8y-radio">
              <input type="radio" id="radioError" value="option1"><span></span> Radio error
            </label>
          </div>
        </div>
      </div>

    </form>
  </div>
  <div class="col-sm-6">
    <div class="form-group has-error">
      <label class="editable">
        <input class="form-control" type="text" placeholder="Editable field error" required>
        <span>Editable field error</span>
      </label>
    </div>
    <div class="form-group has-error">
      <label class="control-label" >Select error</label>
      <div class="c8y-select-wrapper">
        <select class="form-control" name="" id="">
          <option value="">----</option>
        </select>
        <span></span>
      </div>
    </div>


  </div>
</div>

Optional validation state icons

You can also add optional feedback icons with the addition of .has-feedback and the right icon.

Feedback icons only work with textual <input class="form-control"> elements.

(success)
(warning)
@
(success)
<div class="row">
  <div class="col-sm-6">
    <form>
      <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputSuccess2">Input success</label>
        <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
        <span class="fa fa-check form-control-feedback" aria-hidden="true"></span>
        <span id="inputSuccess2Status" class="sr-only">(success)</span>
      </div>

      <div class="form-group has-warning has-feedback">
        <label class="control-label" for="inputWarning2">Input warning</label>
        <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
        <span class="fa fa-warning form-control-feedback" aria-hidden="true"></span>
        <span id="inputWarning2Status" class="sr-only">(warning)</span>
      </div>

      <div class="form-group has-error has-feedback">
        <label for="msgId" class="control-label">Input error message</label>
        <input id="msgId" name="msgId" type="text" class="form-control ng-isolate-scope ng-empty ng-dirty ng-valid-parse ng-invalid ng-invalid-required ng-touched" ng-model="$ctrl.requestTemplate.msgId" c8y-smart-rest-validate-unique-msg-id-in-template="$ctrl.template"
          original-msg-id="$ctrl.originalMsgId" required="">
        <c8y-error-feedback field="requestTemplateForm.msgId" class="ng-isolate-scope"><i c8y-icon="warning" class="form-control-feedback fa fw fa-warning" ng-show="vm.shouldShowWarningIcon()"></i>
          <small class="form-control-feedback-message ng-scope ng-active" ng-messages="vm.field.$error" ng-if="vm.shouldShowMessage()">
            <span ng-message="required" translate="" class="ng-scope"><span class="ng-scope">This field is required.</span></span>
          </small>
        </c8y-error-feedback>
      </div>

      <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputGroupSuccess1">Input group success</label>
        <div class="input-group">
          <span class="input-group-addon">@</span>
          <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
        </div>
        <span class="fa fa-check form-control-feedback" aria-hidden="true"></span>
        <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
      </div>
    </form>
  </div>
</div>

Optional icons in horizontal and inline forms

(success)
@
(Error)
(success)
@
(success)
<div class="row">
  <div class="col-md-5">
    <!-- form-horizontal -->
    <form class="form-horizontal">
      <div class="form-group has-success has-feedback">
        <label class="control-label col-sm-3" for="inputSuccess3">Input success</label>
        <div class="col-sm-9">
          <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
          <span class="fa fa-check form-control-feedback" aria-hidden="true"></span>
          <span id="inputSuccess3Status" class="sr-only">(success)</span>
        </div>
      </div>
      <div class="form-group has-error has-feedback">
        <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group error</label>
        <div class="col-sm-9">
          <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupError2Status"> </div>
          <span class="fa fa-warning form-control-feedback" aria-hidden="true"></span>
          <span id="inputGroupError2Status" class="sr-only">(Error)</span>
        </div>
      </div>
      <div class="form-group has-error has-feedback">
        <label for="" class="control-label col-sm-3">Input error message</label>
        <div class="col-sm-9">
          <div class="form-group">
            <input name="yellowRangeMax" type="number" 
              class="form-control ng-valid-min ng-valid-max ng-touched ng-empty ng-dirty ng-valid-number ng-invalid ng-invalid-required" ng-change="setRangesFieldsAsTouched()" required="required" >
            <c8y-error-feedback field="singleDpForm.yellowRangeMax" class="ng-isolate-scope">
              <i c8y-icon="warning" class="form-control-feedback fa fw fa-warning" ng-show="!vm.isFieldHidden() && vm.shouldShowWarningIcon()" ></i>
              <small class="form-control-feedback-message ng-scope ng-active" ng-messages="vm.field.$error" ng-if="!vm.isFieldHidden() && vm.shouldShowMessage()" >
                <span ng-message="required" translate="" class="ng-scope" >Required</span>
              </small>
            </c8y-error-feedback>
          </div>
        </div>
      </div>
    </form>
  </div>
  <div class="col-md-7">
    <!-- form inline -->
    <form class="form-inline">
      <div class="form-group has-warning has-feedback">
        <label class="control-label" for="inputSuccess4">Label</label>
        <input type="text" class="form-control" id="inputSuccess4" placeholder="Input with Warning" aria-describedby="inputWarning4Status">
        <span class="fa fa-warning form-control-feedback" aria-hidden="true"></span>
        <span id="inputWarning4Status" class="sr-only">(success)</span>
      </div>
      <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputGroupSuccess3">Label</label>
        <div class="input-group">
          <span class="input-group-addon">@</span>
          <input type="text" class="form-control" id="inputGroupSuccess3" placeholder="Input group with success" aria-describedby="inputGroupSuccess3Status">
        </div>
        <span class="fa fa-check form-control-feedback" aria-hidden="true"></span>
        <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
      </div>
    </form>
  </div>
</div>

Optional icons with hidden .sr-only labels

If you use the .sr-only class to hide a form control's label the icon position will be adjusted once it's been added.

(success)
Units
(success)
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="fa fa-check form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">Units</span>
    <input type="text" class="form-control" id="inputGroupWarning4" aria-describedby="inputGroupWarning4Status">
  </div>
  <span class="fa fa-warning form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label sr-only">Input error message</label>
  <input name="yellowRangeMax" type="number" class="form-control ng-valid-min ng-valid-max ng-touched ng-empty ng-dirty ng-valid-number ng-invalid ng-invalid-required" ng-change="setRangesFieldsAsTouched()" required="required" >
  <c8y-error-feedback field="singleDpForm.yellowRangeMax" class="ng-isolate-scope">
    <i c8y-icon="warning" class="form-control-feedback fa fw fa-warning" ng-show="!vm.isFieldHidden() && vm.shouldShowWarningIcon()" ></i>
    <small class="form-control-feedback-message ng-scope ng-active" ng-messages="vm.field.$error" ng-if="!vm.isFieldHidden() && vm.shouldShowMessage()" >
        <span ng-message="required" translate="" class="ng-scope" >Required</span>
      </small>
  </c8y-error-feedback>
</div>