Field

Use Field to wrap a form input with a label, helper text, and validation messages. It passes size, disabled, and validation state down to the input it wraps, such as an Input, Incrementer, or Picker.

Import

import { Field } from '/@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
label	string	No	Label text shown above the input.
hint	string	No	Helper text shown below the input.
error	string	No	Error message shown below the input. Takes priority over success and hint.
success	string	No	Success message shown below the input.
size	'medium' | 'large'	No	Field size, passed down to the wrapped input. Defaults to medium.
disabled	boolean	No	Whether the field is disabled. Defaults to false.
children	VNode	No	The form input to wrap, such as an Input or Incrementer.

Field also accepts standard HTML attributes (for example, className), except size.

Example

Wrap an input with a label and helper text:

import { Field, Input, provider } from '/@dropins/tools/components.js';
import { h } from '/@dropins/tools/preact.js';

await provider.render(Field, {
  label: 'Email',
  hint: 'We never share your email.',
  children: h(Input, { name: 'email', placeholder: 'you@example.com' }),
})(document.querySelector('.field'));

Related

• Input — wrap it in a Field, as shown in the example above.
• Design tokens — the spacing and typography fields use.