Forms

Checkbox

By default, the checkbox will be blue when active, but you can apply other colors as a class to the input to use that color instead. For example: apply check-green to use green. Valid colors are black, bright-blue, green, yellow, red, salmon, and orange

Base Checkbox

<input type="checkbox" id="checkbox-demo" class="cl-check" />
<label for="checkbox-demo">Checkbox Demo</label>

Checkbox with error

This is an error message
<div class="form-group has-error">
<input type="checkbox" id="checkbox-demo2" class="cl-check" />
<label for="checkbox-demo2">Checkbox Demo</label>
<div class="error-message">This is an error message</div>
</div>

Date/Time Picker

REQUIRES JAVASCRIPT
This element requires both jQuery and corelogic-ui.min.js to function properly.

You will need to execute dateTimePickerInit() to initialize the date pickers after the page is loaded.

If you only want to load the date/time picker, then you will need to load @corelogic/clui/dist/js/components/dateTimePicker.js.

Base Date/Time Picker

<div class="form-group">
  <label for="dp1">This label gets uppercased</label>
  <div class="input-group date" id="datepicker1">
    <input type="text" class="form-control" id="dp1">
    <span class="input-group-addon">
      <i class="fa fa-calendar"></i>
    </span>
  </div>
</div>

Date/Time Picker with error

This is an error message.
<div class="form-group has-error">
  <label for="dp3">This label gets uppercased</label>
  <div class="input-group date" id="datepicker3">
    <input type="text" class="form-control" id="dp3" />
    <span class="input-group-addon">
      <i class="fa fa-calendar"></i>
    </span>
  </div>
  <div class="error-message">This is an error message.</div>
</div>

Date Range

<div class="form-group">
  <label for="dp4">This label gets uppercased</label>
  <div class="input-group daterange" id="datepicker4">
    <input type="text" class="form-control" id="dp4">
    <span class="input-group-addon">
      <i class="fa fa-calendar"></i>
    </span>
  </div>
</div>

Input Fields

Modular install (In case you don't want to load all of CLUI.)

In your code add the clui-fonts/fonts.css first and then the @corelogic/clui/dist/css/components/forms.css file from your npm repository.

Default Input

<div class="form-group">
  <label for="input1">This label gets uppercased</label>
  <input class="form-control" placeholder="Placeholder text" id="input1">
</div>

Default Input With Icon

<div class="form-group">
  <label for="input2">This label gets uppercased</label>
  <div class="input-group">
    <i class="fa fa-search left-icon"></i>
    <input class="form-control" placeholder="Icon to the left" id="input2">
  </div>
</div>

<div class="form-group">
  <label for="input3">This label gets uppercased</label>
  <div class="input-group">
    <i class="fa fa-check right-icon"></i>
    <input class="form-control" placeholder="Icon to the right" id="input3">
  </div>
</div>

Default Input With Button

<div class="form-group">
  <label for="input4">Sample placeholder</label>
  <div class="input-group">
    <input class="form-control" placeholder="Sample placeholder" id="input4">
    <div class="input-group-btn"><button class="btn btn-default">GO!</button></div>
  </div>
</div>

Large Input

<div class="form-group form-group-lg">
  <label for="input5">This label gets uppercased</label>
  <input class="form-control" placeholder="Placeholder text" id="input5">
</div>

Large Input With Button and Shadow

<div class="form-group form-group-lg">
  <label for="input6">This label gets uppercased</label>
  <div class="input-group input-shadow">
    <input class="form-control" placeholder="Sample placeholder" id="input6">
    <div class="input-group-btn"><button class="btn btn-default btn-lg">GO!</button></div>
  </div>
</div>

Required Input

<div class="form-group">
  <label class="required" for="input7">This label gets uppercased</label>
  <input class="form-control" placeholder="Placeholder text" id="input7">
</div>

Input With Error

If the input does not have an error, the error message will not be displayed

This is an error message.
This is an error message.
<div class="form-group form-group-lg has-error">
  <label for="input8">This label gets uppercased</label>
  <input class="form-control" placeholder="Sample placeholder" id="input8">
  <div class="error-message">This is an error message.</div>
</div>

<div class="form-group has-error">
  <label for="input9">This label gets uppercased</label>
  <div class="input-group">
    <input class="form-control" placeholder="Sample placeholder" id="input9">
    <div class="input-group-btn"><button class="btn btn-default">GO!</button></div>
  </div>
  <div class="error-message">This is an error message.</div>
</div>

Disabled Input

<div class="form-group">
  <label for="input10">This label gets uppercased</label>
  <input class="form-control" placeholder="Sample placeholder" disabled id="input10">
</div>

Text Area

<div class="form-group">
  <label for="input11">This label gets uppercased</label>
  <textarea class="form-control" id="input11">Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</textarea>
</div>

Text Area with Error

You did something wrong.
<div class="form-group has-error">
  <label for="input12">This label gets uppercased</label>
  <textarea class="form-control" id="input12">Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</textarea>
  <div class="error-message">You did something wrong.</div>
</div>

Radio

By default, the radio button will be blue when active, but you can apply other colors as a class to the input to use that color instead. For example: apply radio-green to use green. Valid colors are black, bright-blue, green, yellow, red, salmon, and orange

Base Radio

Choose one: 
<fieldset class="form-group">
  <legend>Choose one:</legend>
  <input type="radio" id="radio-demo1" name="radio-demo" class="cl-radio radio-salmon" />
  <label for="radio-demo1">Salmon</label>
  <input type="radio" id="radio-demo2" name="radio-demo" class="cl-radio radio-orange" />
  <label for="radio-demo2">Orange</label>
</fieldset>

Radio with error

Choose one:
This is an error message.
<fieldset class="form-group">
  <legend>Choose one:</legend>
  <div class="form-group has-error">
    <input type="radio" id="radio-demo3" name="radio-demo2" class="cl-radio" />
    <label for="radio-demo3">The radio button becomes red</label>
    <div class="error-message">This is an error message.</div>
  </div>
</fieldset>

Select

To display the placeholder, add an option at the top of the select with no value and your placeholder text. If a value is required to be selected, you can also make that placeholder option disabled to prevent the user from choosing it. Opt groups can be added using an optgroup tag with a label attribute for the text.

REQUIRES JAVASCRIPT
This element requires both jQuery and corelogic-ui.min.js to function properly.

If you would like to only use the detailed select, load @corelogic/clui/dist/js/components/select.js.If you would like to only load the multi-select, then load @corelogic/clui/dist/js/components/select2.js.

Base Select

<label for="select-demo">This label gets uppercased</label>
<label class="cl-select">
  <select name="select-demo" id="select-demo">
    <option value="">Select an option</option>
    <option>Sunday</option>
    <option>Monday</option>
    <option>Tuesday</option>
    <option>Wednesday</option>
    <option>Thursday</option>
    <option>Friday</option>
    <option>Saturday</option>
  </select>
</label>

Select with error

This is an error message
<div class="form-group has-error">
  <label for="select-demo2">This label gets uppercased</label>
  <label class="cl-select">
    <select name="select-demo2" id="select-demo2">
      <option value="">Select an option</option>
      <option>Sunday</option>
      <option>Monday</option>
      <option>Tuesday</option>
      <option>Wednesday</option>
      <option>Thursday</option>
      <option>Friday</option>
      <option>Saturday</option>
    </select>
  </label>
  <div class="error-message">This is an error message</div>
</div>

Detailed Select

Make sure to call window.clui.selectInit() when the page is finished loading to initialize the component.


<label for="select-picker">This label gets uppercased</label><br>
<select class="selectpicker" id="select-picker">
  <option data-subtext="Run Reports, no access to admin">Basic User</option>
  <option data-subtext="Create/edit users and groups; cannot create clients">Admin</option>
  <option data-subtext="Create/edit clients, groups, and users; modify global settings">Super Admin</option>
</select>

Multi Select

Make sure to call window.clui.select2Init() to initialize the component after the page has loaded. If you would like to pass a context, you can pass it as the only parameter.

<label for="multi-select-demo">This label gets uppercased</label>
<select name="multi-select-demo" id="multi-select-demo" class="cl-multi-select form-control"
  data-placeholder="Select multiple items" multiple="multiple">
  <option></option>
  <optgroup label="Days of the week"></optgroup>
  <option>Sunday</option>
  <option>Monday</option>
  <option>Tuesday</option>
  <option>Wednesday</option>
  <option>Thursday</option>
  <option>Friday</option>
  <option>Saturday</option>
  <optgroup label="Months of the year"></optgroup>
  <option>January</option>
  <option>February</option>
  <option>March</option>
  <option>April</option>
  <option>May</option>
  <option>June</option>
  <option>July</option>
  <option>August</option>
  <option>September</option>
  <option>October</option>
  <option>November</option>
  <option>December</option>
</select>

Multi Select with error

This is an error message
<label for="multi-select-demo2">This label gets uppercased</label>
<div class="form-group has-error">
  <select name="multi-select-demo2" id="multi-select-demo2" class="cl-multi-select form-control"
    data-placeholder="Select multiple items" multiple="multiple">
    <option></option>
    <optgroup label="Days of the week"></optgroup>
    <option>Sunday</option>
    <option>Monday</option>
    <option>Tuesday</option>
    <option>Wednesday</option>
    <option>Thursday</option>
    <option>Friday</option>
    <option>Saturday</option>
    <optgroup label="Months of the year"></optgroup>
    <option>January</option>
    <option>February</option>
    <option>March</option>
    <option>April</option>
    <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>August</option>
    <option>September</option>
    <option>October</option>
    <option>November</option>
    <option>December</option>
  </select>
  <div class="error-message">This is an error message</div>
</div>

Slider

By default, the slider will be blue when active, but you can apply other colors as a class to the input to use that color instead. For example: apply slider-green to use green. Valid colors are black, bright-blue, green, yellow, red, salmon, and orange.

By default, the slider will have a min of 0, a max of 100, a step of 1 and start at the min value. You can configure each one individually within the input.

REQUIRES JAVASCRIPT
This element requires both jQuery and corelogic-ui.min.js to function properly.

If you would like to only load the slider, make sure to load @corelogic/clui/dist/js/components/jquery-ui.js and @corelogic/clui/dist/js/components/slider.js. Call window.clui.sliderInit() to initialize the component.

Base Slider


<label for="slider1">This label gets uppercased</label>
<input type="range" min="0" max="100" step="10" value="50" class="cl-slider" id="slider1">
<br>
<label for="slider2">This label gets uppercased</label>
<input type="range" class="cl-slider slider-orange" id="slider2">

Toggle Switch

REQUIRES JAVASCRIPT
This element requires both jQuery and corelogic-ui.min.js to function properly.

Call window.clui.mobileToggleInit() after the page is loaded to initialize the mobile swipe actions for the toggle.

If you would like to only load the toggle, make sure to load @corelogic/clui/dist/js/components/toggle.js and @corelogic/clui/dist/js/vendor/hammer.js for mobile swipe support and then call window.clui.mobileToggleInit() when the page is loaded.

By default, the toggle will be blue when active, but you can apply other colors as a class to the input to use that color instead. For example: apply toggle-green to use green. Valid colors are black, bright-blue, green, yellow, red, salmon, and orange

Base Toggle

<div class="toggle-container">
    <input id="toggle-demo" class="cl-toggle" type="checkbox" name="toggle-demo"/>
    <label for="toggle-demo">Toggle Switch Demo</label>
</div>
<div class="toggle-container">
    <input id="toggle-demo2" class="cl-toggle toggle-green" type="checkbox" name="toggle-demo2"/>
    <label for="toggle-demo2">Toggle Switch Demo 2</label>
</div>

Toggle with state

enabled disabled 
<div class="toggle-container">
    <input id="toggle-demo3" class="cl-toggle toggle-green" type="checkbox" name="toggle-demo3"/>
    <label for="toggle-demo3"></label>
    <span class="toggle-on">enabled</span>
    <span class="toggle-off">disabled</span>
</div>

Disabled Toggle

<div class="toggle-container">
    <input id="toggle-demo4" class="cl-toggle toggle-green" type="checkbox" name="toggle-demo4" disabled/>
    <label for="toggle-demo4">Disabled Toggle</label>
</div>
<div class="toggle-container">
    <input id="toggle-demo4" class="cl-toggle toggle-green" type="checkbox" name="toggle-demo4" checked disabled/>
    <label for="toggle-demo4">Disabled Toggle</label>
</div>