AdaptableFormField

Defines a Field that appears in an Adaptable Form

export interface

Properties

Property Details

clearToDefault

For single select fields only. When the user clears the combobox, whether to restore instead of leaving the field empty.

Defaults to true when defaultValue is set, otherwise false. Set to false when an empty selection is a distinct state from the default.

clearToDefault?: boolean;

Property Value

boolean

defaultValue

Field Default Value - can be of type string, boolean, number, or for select fields with multi: true an array of those.

For single select fields, this is also the value restored when the user clears the combobox (unless is false).

defaultValue?: string | boolean | number | Array<string | number | boolean>;

Property Value

string | boolean | number | Array<string | number | boolean>

disabled

Disable the field's input. Either a boolean or a function evaluated against the current form data. Disabled fields render but the user cannot edit them.

disabled?: boolean | ((formData: AdaptableFormData, context: BaseContext) => boolean);

Property Value

boolean | ((formData:AdaptableFormData, context:BaseContext) => boolean)

fieldType

Field Type - dictates which UI control is rendered

fieldType: AdaptableFormFieldType;

Property Value

AdaptableFormFieldType

helpText

Inline help text rendered immediately below the field's input. Useful for short explanations such as "format: YYYY-MM-DD" or "min 3 chars".

helpText?: string;

Property Value

string

hidden

Hide the field. Either a boolean or a function evaluated against the current form data. Hidden fields are not rendered and are excluded from validation.

hidden?: boolean | ((formData: AdaptableFormData, context: BaseContext) => boolean);

Property Value

boolean | ((formData:AdaptableFormData, context:BaseContext) => boolean)

label

Label to display in the Field

label: string;

Property Value

string

max

Maximum allowed value. For number and slider: the highest accepted number. For date, time and datetime: the latest allowed value in ISO format.

max?: number | string;

Property Value

number | string

maxLength

Maximum length for text and textarea fields.

maxLength?: number;

Property Value

number

min

Minimum allowed value. For number and slider: the lowest accepted number. For date, time and datetime: the earliest allowed value in ISO format (YYYY-MM-DD / HH:mm / YYYY-MM-DDTHH:mm).

min?: number | string;

Property Value

number | string

minLength

Minimum length for text and textarea fields.

minLength?: number;

Property Value

number

multi

For select fields only. When true the field renders as a multi-select combobox; the field's value is an array of selected option.values rather than a single value.

multi?: boolean;

Default Value

false

Property Value

boolean

name

Name of the Field

name: string;

Property Value

string

onValueChange

Optional callback invoked whenever value of this field changes

onValueChange?: (value: any, context: BaseContext) => void;

Property Value

(value: any, context:BaseContext) => void

options

Items to populate the select and radio fieldTypes.

Either a static array, or a function that derives the options from the current form data and Adaptable context. The function form may return a Promise for asynchronously-loaded options - the form will render the field with no items until the promise resolves.

options?: AdaptableFormFieldOption[] | ((formData: AdaptableFormData, context: BaseContext) => AdaptableFormFieldOption[] | Promise<AdaptableFormFieldOption[]>);

Property Value

AdaptableFormFieldOption[] | ((formData:AdaptableFormData, context:BaseContext) =>AdaptableFormFieldOption[] | Promise<AdaptableFormFieldOption[]>)

pattern

Regular expression that the value of a text field must match.

pattern?: string;

Property Value

string

placeholder

Placeholder text shown inside text, textarea, number, date, time and datetime inputs when empty. For select fields it is rendered as the empty-state label when no value is selected.

When omitted on a select field with a , the label of the matching options entry is used as the empty-state label.

placeholder?: string;

Property Value

string

render

For custom fields only. Renders an arbitrary React node as the field's input. Receives the current value, a setValue setter (controlled), the current form data, the Adaptable context and the resolved disabled state.

Use this as an escape hatch when none of the built-in fieldTypes fit - e.g. to render a star-rating widget, a tag editor or any bespoke control.

render?: (params: AdaptableFormFieldRenderParams) => React.ReactNode;

Property Value

(params:AdaptableFormFieldRenderParams) => React.ReactNode

required

If true the field is treated as required. An empty value ('', null, undefined, or unchecked checkbox) will produce a validation error.

required?: boolean;

Property Value

boolean

rows

For textarea fields: the visible number of text rows.

rows?: number;

Default Value

3

Property Value

number

step

Stepping interval for number, slider, time and datetime fields.

step?: number;

Property Value

number

tooltip

Tooltip shown when hovering the field's label.

tooltip?: string;

Property Value

string

validate

Custom field-level validation. Return an error message string to mark the field invalid, or null/undefined if the value is valid.

Custom validation runs after built-in checks (required, min, max, pattern, etc.) - the first failing check wins.

validate?: (value: any, formData: AdaptableFormData, context: BaseContext) => string | null | undefined;

Property Value

(value: any, formData:AdaptableFormData, context:BaseContext) => string | null | undefined