Field

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.

Name	Type	Required	Description
id	string	false	The HTML `id` of the field
classes	string	false	Classes to apply to the field
inline	string	false	Set when needing to place multiple fields on the same line
attributes	object	false	HTML attributes (for example, data attributes) to add to the field
error	`Error`	false	Configuration for validation errors
dontWrap	boolean	false	Prevents the input from being wrapped in field component

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)