How to add and configure a custom field in Form Builder

What you build

A Form Builder field has two parts: a field definition that appears in the palette and a renderer component that receives a FormBuilderField and an Angular FormControl. The definition can also include a settings schema, so admin users can configure labels, defaults, and renderer-specific options from the inspector.

Related component docs

Use the Form Builder docs when you need API tables, examples, and the renderer page for saved schemas.

Import the public API

Consumer code should import from the secondary entry point. The builder, schema types, field types, and provider helpers are exported from @ngstarter-ui/components/form-builder.

Create the field renderer

A renderer is a standalone Angular component. It reads display data from field() and binds the provided control() to NgStarter form components. In this example the custom priority field uses ButtonToggle.

Register the field

Register one field with provideFormBuilderField, or use provideFormBuilder when you want to register multiple fields, layout items, settings components, or a global upload callback in one place.

Add settings for the inspector

The settings config can inherit a built-in settings group and append a schema for custom options. Use dotted names such as settings.lowLabel when the value belongs in the field's custom settings bag.

Use the custom field in a schema

Saved schemas only need a field whose type matches the registered definition. The renderer and builder both resolve the definition at runtime, so the JSON remains compact and backend-friendly.

Render the builder

Bind the schema with two-way model syntax. When users drag the custom field or edit its settings, the schema signal receives the updated JSON.

Custom field checklist

• Give every field type a unique type.
• Set defaults for label, width, default value, and custom settings.
• Use NgStarter controls inside renderer components where a matching component exists.
• Use settings.schema for inspector controls instead of custom settings UI.
• Keep saved form data in FormBuilderSchema, not in component-only state.