Cookies on

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content


Use this component to wrap form inputs.

How to use this component

Inputs should be wrapped to provide layout.

Usually, the onsField macro is already called from within form input components, so you should not need to call this yourself.

However, if you need to create a pattern or component that requires a field you can use Nunjucks' call functionality (opens in a new tab) .

The field will render as a <div> with the class ons-field.


idstringfalseThe HTML id of the field
classesstringfalseClasses to apply to the field
inlinestringfalseSet when needing to place multiple fields on the same line
attributesobjectfalseHTML attributes (for example, data attributes) to add to the field
errorErrorfalseConfiguration for validation errors
dontWrapbooleanfalsePrevents the input from being wrapped in field component

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Field’ component on GitHub (opens in a new tab)