Base interface for all dynamic form field definitions.

This interface defines the common properties that all field types must implement. Field-specific properties are defined through the generic TProps parameter, providing type safety for field-specific configuration.

Properties

Name	Type	Description
className	`string \| undefined`	Additional CSS classes for custom styling. Space-separated string of CSS class names that will be applied to the field container for custom styling.
Example usage `className: 'highlight required-field' className: 'mt-4 text-center'`
col	`number \| undefined`	Column sizing configuration for responsive grid layout. Specifies how many columns this field should span in a 12-column grid system. Supports responsive behavior and field arrangement.
Example usage `col: 12 // Full width col: 6 // Half width col: 4 // One third width col: 3 // Quarter width`
disabled	`boolean \| undefined`	Whether the field is disabled and cannot be interacted with. When true, the field is rendered in a disabled state and cannot receive user input. The value can still be modified programmatically. @value false
hidden	`boolean \| undefined`	Whether the field is hidden from view. When true, the field is not rendered in the UI but still participates in form state and validation. Useful for conditional field display. @value false
key	`string`	Unique field identifier used for form binding and value tracking. This key is used to associate the field with form values and must be unique within the form. It follows object property naming conventions.
Example usage `// Simple field key key: 'email' // Nested object notation key: 'address.street' // Array notation key: 'hobbies[0]'`
label	`DynamicText \| undefined`	Human-readable field label displayed to users. Provides accessible labeling for form fields and is typically displayed above or beside the field input. Supports static strings, translation keys, Observables, and Signals for dynamic content.
Example usage `// Static string label: 'Email Address' // Translation key (auto-detected) label: 'form.email.label' // Observable from translation service label: this.transloco.selectTranslate('form.email.label') // Signal-based label: computed(() => this.translations().email.label)`
props	`TProps \| undefined`	Field-specific properties and configuration options. Contains type-specific configuration that varies based on the field type. The shape is defined by the TProps generic parameter.
Example usage `// Input field props props: { placeholder: 'Enter email', type: 'email' } // Select field props props: { options: [{ label: 'Yes', value: true }], multiple: false } // Button field props props: { buttonType: 'submit', variant: 'primary' }`
readonly	`boolean \| undefined`	Whether the field is read-only. When true, the field displays its value but cannot be modified by user interaction. Differs from disabled in styling and accessibility. @value false
tabIndex	`number \| undefined`	Tab index for keyboard navigation. Controls the order in which fields receive focus when navigating with the Tab key. Follows standard HTML tabindex behavior.
Example usage `tabIndex: 1 // First field in tab order tabIndex: -1 // Excluded from tab navigation tabIndex: 0 // Natural tab order`
type	`string`	Field type identifier for component selection. Determines which component will be rendered for this field. Must match a registered field type name in the field registry.
Example usage `type: 'input' // Text input field type: 'select' // Dropdown selection type: 'checkbox' // Boolean checkbox type: 'group' // Field group container`

Example usage

// Basic text input field
const textField: FieldDef<{ placeholder: string }> = {
  key: 'email',
  type: 'input',
  label: 'Email Address',
  props: { placeholder: 'Enter your email' },
  col: 12
};

// Complex field with conditional logic
const conditionalField: FieldDef<SelectProps> = {
  key: 'country',
  type: 'select',
  label: 'Country',
  props: {
    options: [
      { label: 'United States', value: 'us' },
      { label: 'Canada', value: 'ca' }
    ]
  },
  hidden: false,
  disabled: false,
  col: 6
};