Color Admin

- 5
  NOTIFICATIONS (5)

  ###### Server Error Reports

  3 minutes ago

  ###### John Smith

  Quisque pulvinar tellus sit amet sem scelerisque tincidunt.

  25 minutes ago

  ###### Olivia

  Quisque pulvinar tellus sit amet sem scelerisque tincidunt.

  35 minutes ago

  ###### New User Registered

  1 hour ago

  ###### New Email From John

  2 hour ago
  View more
- Adam Schwartz
  Edit Profile 2 Inbox Calendar Setting
  Log Out

- Sean Ngu Front end developer
- - Settings
  - Send Feedback
  - Helps

- Navigation
- Dashboard
  - Dashboard v1
  - Dashboard v2
  - Dashboard v3
- 10 Email
  - Inbox
  - Compose
  - Detail
- Widgets NEW
- UI Elements NEW
  - General
  - Typography
  - Tabs & Accordions
  - Unlimited Nav Tabs
  - Modal & Notification
  - Widget Boxes
  - Media Object
  - Buttons
  - Icons
  - Simple Line Icons
  - Ionicons
  - Tree View
  - Language Bar & Icon
  - Social Buttons
  - Intro JS
- Bootstrap 4 NEW
- Form Stuff NEW
  - Form Elements
  - Form Plugins
  - Form Slider + Switcher
  - Form Validation
  - Wizards
  - Wizards + Validation
  - WYSIWYG
  - X-Editable
  - Multiple File Upload
  - Summernote
  - Dropzone
- Tables
  - Basic Tables
  - Managed Tables
    - Default
    - Autofill
    - Buttons
    - ColReorder
    - Fixed Column
    - Fixed Header
    - KeyTable
    - Responsive
    - RowReorder
    - Scroller
    - Select
    - Extension Combination
- Front End
  - One Page Parallax
  - Blog
  - Forum
  - E-Commerce
- Email Template
  - System Template
  - Newsletter Template
- Chart NEW
  - Flot Chart
  - Morris Chart
  - Chart JS
  - d3 Chart
  - Apex Chart
- Calendar
- Map
  - Vector Map
  - Google Map
- Gallery
  - Gallery v1
  - Gallery v2
- Page Options
  - Blank Page
  - Page with Footer
  - Page without Sidebar
  - Page with Right Sidebar
  - Page with Minified Sidebar
  - Page with Two Sidebar
  - Page with Line Icons
  - Page with FontAwesome
  - Full Height Content
  - Page with Wide Sidebar
  - Page with Light Sidebar
  - Page with Mega Menu
  - Page with Top Menu
  - Page with Boxed Layout
  - Page with Mixed Menu
  - Boxed Layout with Mixed Menu
  - Page with Transparent Sidebar
- Extra
  - Timeline
  - Coming Soon Page
  - Search Results
  - Invoice
  - 404 Error Page
  - Profile Page
- Login & Register
  - Login
  - Login v2
  - Login v3
  - Register v3
- Version NEW
  - HTML
  - AJAX
  - ANGULAR JS
  - ANGULAR JS 8
  - LARAVEL
  - VUE JS
  - REACT JS
  - MATERIAL DESIGN
  - APPLE DESIGN
  - TRANSPARENT DESIGN
  - FACEBOOK DESIGN
- Helper
  - Predefined CSS Classes
- Menu Level
  - Menu 1.1
    - Menu 2.1
      - Menu 3.1
      - Menu 3.2
    - Menu 2.2
    - Menu 2.3
  - Menu 1.2
  - Menu 1.3
- Collapse

1. Home
2. Form Stuff
3. Form Elements

# Form Elements header small text goes here...

#### Form Controls

Textual form controls—like `<input>`s, `<select>`s, and `<textarea>`s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.
Email address
We'll never share your email with anyone else.
Example select
Example multiple select
Example textarea

    <!-- email -->
    <input type="email" class="form-control" placeholder="Enter email" />

    <!-- select -->
    <select class="form-control">...</select>

    <!-- multiple select -->
    <select multiple class="form-control">...</select>

    <!-- textarea -->
    <textarea class="form-control" rows="3"></textarea>

#### Readonly

Readonly
Readonly Plaintext
Password

    <!-- form-control-lg -->
    <input class="form-control" type="text" placeholder="Readonly input here…" readonly />

    <!-- readonly plaintext -->
    <input type="text" readonly class="form-control-plaintext" value="email@example.com" />

    <!-- password -->
    <input type="password" readonly class="form-control" placeholder="Password" />

#### Sizing

    <!-- form-control-lg -->
    <input class="form-control form-control-lg" type="text" />
    <select class="form-control form-control-lg">...</select>

    <!-- default -->
    <input class="form-control" type="text" />
    <select class="form-control">...</select>

    <!-- form-control-sm -->
    <input class="form-control form-control-sm" type="text" />
    <select class="form-control form-control-sm">...</select>

#### Validation

Valid Input
@
Looks good!
Invalid Input
@
Please choose a unique and valid username.
Tooltip Message
@
Please choose a unique and valid username.
@
Looks good!

    <!-- valid -->
    <div class="row form-group m-b-10">
      <label class="col-md-3 col-form-label">Valid Input</label>
      <div class="col-md-9">
        <input type="text" class="form-control is-valid" />
        <div class="valid-feedback">Looks good!</div>
        <div class="valid-tooltip">Looks good!</div>
      </div>
    </div>

    <!-- invalid -->
    <div class="row form-group m-b-10">
      <label class="col-md-3 col-form-label">...</label>
      <div class="col-md-9">
        <input type="text" class="form-control is-invalid" />
        <div class="invalid-feedback">...</div>
        <div class="invalid-tooltip">...</div>
      </div>
    </div>

### Checkboxes and Radios

#### CSS Checkbox NEW

CSS Checkboxes & Radios is not supported in older browser.
Default Checkbox
CSS Checkbox Label 1
Disabled State
Success State
Error State
Inline Checkbox
Checkbox Label 1
Checkbox Label 2
Default Radio
Radio option 1
Disabled State
Success State
Error State
Inline Radio
Radio option 1
Radio option 2
Checkbox Switcher

    <!-- default -->
    <div class="checkbox checkbox-css">
      <input type="checkbox" id="cssCheckbox1" checked />
      <label for="cssCheckbox1">Checkbox</label>
    </div>
    <div class="radio radio-css">
      <input type="radio" id="cssRadio1" checked />
      <label for="cssRadio1">Radio</label>
    </div>

    <!-- inline -->
    <div class="checkbox checkbox-css checkbox-inline">
      <input type="checkbox" id="inlineCssCheckbox1" checked />
      <label for="inlineCssCheckbox1">Inline Checkbox</label>
    </div>
    <div class="radio radio-css radio-inline">
      <input type="radio" id="inlineCssRadio1" />
      <label for="inlineCssRadio1">Inline Radio</label>
    </div>

    <!-- success state -->
    <div class="checkbox checkbox-css is-valid">...</div>
    <div class="checkbox checkbox-radio is-valid">...</div>

    <!-- error state -->
    <div class="checkbox checkbox-radio is-invalid">...</div>
    <div class="checkbox checkbox-css is-invalid">...</div>

    <!-- switcher -->
    <div class="switcher">
      <input type="checkbox" name="switcher_checkbox_1" id="switcher_checkbox_1" checked="" value="1">
      <label for="switcher_checkbox_1"></label>
    </div>

#### Bootstrap Custom Checkbox & Radios NEW

Custom Checkbox
Check this custom checkbox
disabled custom checkbox
Custom Radio
Toggle this custom radio
Or toggle this other custom radio
Custom Switches
Toggle this switch element
Disabled switch element

    <!-- begin custom-checkbox -->
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="customCheck1">
      <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
    </div>
    <!-- end custom-checkbox -->

    <!-- begin custom-radio -->
    <div class="custom-control custom-radio">
      <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
      <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
    </div>
    <!-- end custom-radio -->

    <!-- begin custom-switches -->
    <div class="custom-control custom-switch">
      <input type="checkbox" class="custom-control-input" id="customSwitch1">
      <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
    </div>
    <!-- end custom-switches -->

#### Checkboxes and Radios

Checkbox
Checkbox Label 1
Disabled Checkbox
Valid Checkbox
Invalid Checkbox
Inline Checkbox
Checkbox Label 1
Checkbox Label 2
Radio Button
Radio option 1
Disabled Radio
Success State
Error State
Inline Radio Button
Radio option 1
Radio option 2

    <!-- default -->
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="defaultCheckbox" />
      <label class="form-check-label" for="defaultCheckbox">...<label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" id="defaultRadio" checked />
      <label class="form-check-label" for="defaultRadio">...</label>
    </div>

    <!-- inline -->
    <div class="form-check form-check-inline">
      ...
    </div>

    <!-- valid state -->
    <div class="form-check">
      <input class="form-check-input is-valid" />
      <label class="form-check-label">...</label>
    </div>

    <!-- invalid state -->
    <div class="form-check">
      <input class="form-check-input is-invalid" />
      <label class="form-check-label">...</label>
    </div>

### Input Group

@
$
.00
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

    <div class="input-group">
      <span class="input-group-prepend">$</span>
      <input type="text" class="form-control" />
      <span class="input-group-append">.00</span>
    </div>

    <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-append">
        <button type="button" class="btn btn-yellow" data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <button type="button" class="btn btn-yellow dropdown-toggle no-caret">
          Action
        </button>
        <ul class="dropdown-menu dropdown-menu-right">
          ...
        </ul>
      </div>
    </div>

#### Input Group Sizing

@
@
@

    <!-- input-group-lg -->
    <div class="input-group input-group-lg">...</div>

    <!-- default -->
    <div class="input-group">...</div>

    <!-- input-group-sm -->
    <div class="input-group input-group-sm">...</div>

### Form Style

#### Default Style

Legend
Email address
Password
Check me out

    <div class="form-group">
      <label>...</label>
      <input type="text" class="form-control" />
    </div>

#### Form Horizontal

Legend
Email address
Password
Check me out

    <div class="form-group row m-b-15">
      <label class="col-md-3 col-form-label">...</label>
      <div class="col-md-7">
        <input type="text" class="form-control" placeholder="" />
      </div>
    </div>

#### Inline Form

Remember me

    <form class="form-inline">
      ...
    </form>

##### App Settings

Header Fixed
Header Inverse
Sidebar Fixed
Sidebar Grid
Sidebar Gradient

##### Admin Design (5)

##### Language Version (7)

##### Frontend Design (4)

Documentation Reset Local Storage