starlight
Navigation

Donna Seay

2 minutes ago

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring.

Samantha Francis

3 hours ago

My entire soul, like these sweet mornings of spring.

Robert Walker

5 hours ago

I should be incapable of drawing a single stroke at the present moment...

Larry Smith

Yesterday, 8:34pm

When, while the lovely valley teems with vapour around me, and the meridian sun strikes...

Donna Seay

Jan 23, 2:32am

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring.

View More Messages

Suzzeth Bungaos tagged you and 18 others in a post.

October 03, 2017 8:45am

Mellisa Brown appreciated your work The Social Network

October 02, 2017 12:44am

20+ new items added are for sale in your Sale Group

October 01, 2017 10:20pm

Julius Erving wants to connect with you on your conversation with Ronnie Mara

October 01, 2017 6:08pm

Suzzeth Bungaos tagged you and 12 others in a post.

September 27, 2017 6:45am

10+ new items added are for sale in your Sale Group

September 28, 2017 11:30pm

Mellisa Brown appreciated your work The Great Pyramid

September 26, 2017 11:01am

Julius Erving wants to connect with you on your conversation with Ronnie Mara

September 23, 2017 9:19pm

##### Form Elements

Forms are used to collect user information with different element types of input, select, checkboxes, radios and more.

###### Basic Form Input

A basic form control with disabled and readonly mode.

Source Code

    <input class="form-control" placeholder="Input box" type="text">
    <input class="form-control" placeholder="Input box" type="text" readonly>
    <input class="form-control" placeholder="Input box" type="text" disabled>

###### Valid State Input

A form control with success, warning and error state.

Source Code

    <input class="form-control is-valid" placeholder="Input box" type="text">
    <input class="form-control is-warning" placeholder="Input box" type="text">
    <input class="form-control is-invalid" placeholder="Input box" type="text">

###### Custom Checkboxes and Radios

A custom styled checkboxes and radios.

Checkbox Unchecked
Checkbox Checked
Checkbox Disabled
Radio Unchecked
Radio Checked
Radio Disabled

Checkbox Source Code

    <label class="ckbox">
      <input type="checkbox">
      <span>Checkbox Unchecked</span>
    </label>

Radiobox Source Code

    <label class="rdiobox">
      <input name="rdio" type="radio">
      <span>Radio Unchecked</span>
    </label>

###### Custom Select Box

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Source Code

    <select class="form-control select2" data-placeholder="Choose Browser">
      <option value="Firefox">Firefox</option>
      <option value="Chrome">Chrome</option>
      <option value="Safari">Safari</option>
      <option value="Opera">Opera</option>
      <option value="Internet Explorer">Internet Explorer</option>
    </select>

###### File Browser

A custom styled file browser.

Source Code

    <label class="custom-file">
      <input type="file" id="file" class="custom-file-input">
      <span class="custom-file-control"></span>
    </label>

###### Input Groups

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.

@ex.com
$ .00

Source Code

    <div class="input-group">
      <span class="input-group-addon"><i class="icon ion-person tx-16 lh-0 op-6"></i></span>
      <input type="text" class="form-control" placeholder="Username">
    </div>

###### Date Picker

The datepicker is tied to a standard form input field. Click on the input to open an interactive calendar in a small overlay. If a date is chosen, feedback is shown as the input's value.

Default Functionality

Set the numberOfMonths option to an integer of 2 or more to show multiple months in a single datepicker.

Display the datepicker embedded in the page instead of in an overlay.

Source Code

    <div class="input-group">
      <span class="input-group-addon"><i class="icon ion-calendar tx-16 lh-0 op-6"></i></span>
      <input type="text" class="form-control fc-datepicker" placeholder="MM/DD/YYYY">
    </div>

Source Code

    $('#datepickerNoOfMonths').datepicker({
              showOtherMonths: true,
              selectOtherMonths: true,
              numberOfMonths: 2
            });

Source Code

    <div class="fc-datepicker"></div>

###### Color Picker

A simple component to select color in the same way you select color in Adobe Photoshop.

You can allow alpha transparency selection. Check out these example.

Show pallete only. If you'd like, spectrum can show the palettes you specify, and nothing else.

Javascript Code

    $('#colorpicker').spectrum({
      color: '#17A2B8'
    });

    $('#showAlpha').spectrum({
      color: 'rgba(23,162,184,0.5)',
      showAlpha: true
    });

    $('#showPaletteOnly').spectrum({
      showPaletteOnly: true,
      showPalette:true,
      color: '#DC3545',
      palette: [
      ['#1D2939', '#FFF', '#0866C6','#23BF08', '#F49917'],
      ['#DC3545', '#17A2B8', '#6610F2', '#fa1e81', '#72e7a6']
      ]
    });