---
title: Use standard form controls
slug: '392'
canonical_url: https://docs.coveo.com/en/392/
collection: javascript-search-framework
source_format: adoc
---
# Use standard form controls

[jsui-new Coveo JavaScript Search Framework v2.2900.23]


Since the [July 2017 release (v2.2900.23)](https://docs.coveo.com/en/373#july-2017-release-v2290023), the Coveo JavaScript Search Framework exposes several form controls with standard styling:

* `Checkbox`
* `DatePicker`
* `Dropdown`
* `FormGroup`
* `MultiSelect`
* `NumericSpinner`
* `RadioButton`
* `TextInput`

These form controls aren't actual Coveo components.
They're simple and convenient classes which certain "core" Coveo components use, and which you can also use in your own custom code and components.

## Instantiating a standard form control

In eager component loading mode (see [Lazy versus eager component loading - Eager component loading](https://docs.coveo.com/en/295#lazy-component-loading)), all standard form control classes are available under the `Coveo` namespace immediately after the `CoveoJsSearch` library finishes loading.

**Example**

Suppose you want to instantiate a standard `Checkbox` form control and append its HTML node to the `#my-div` element in your search page.

You could do something like this:

```javascript
[ ... ]

<script src="js/CoveoJsSearch.js"></script>

[ ... ]

<script>
  document.addEventListener('DOMContentLoaded', function() {

    [ ... ]

    Coveo.init("#search");

    document.getElementById('my-div').appendChild(new Coveo.Checkbox().getElement());

    [ ... ]

  });
</script>

[ ... ]
```

In lazy component loading mode (see [Lazy versus eager component loading - Lazy component loading](https://docs.coveo.com/en/295#lazy-component-loading)), chances are the form control you want to instantiate isn't yet available after the `init` call of your search interface.

In fact, if no component in your search interface requires it, this form control will never be available under the `Coveo` namespace at all, unless you explicitly load it.

In any case, load the desired form control class (that is, ensure its promise is resolved) before interacting with it in lazy component loading mode.

**Example**

Suppose you want to instantiate a standard `Checkbox` form control and append its HTML node to the `#my-div` element in your search page.

Assuming your search page uses lazy component loading, you could do something like this:

```javascript
document.addEventListener('DOMContentLoaded', function() {

  [ ... ]

  Coveo.init('#search');
  Coveo.load('Checkbox').then(function(Checkbox) {
    document.getElementById('my-div').appendChild(new Checkbox().getElement());
  });

  [ ... ]

});
```