The Display Settings tab controls the front-end appearance of a component. This tab opens by default when editing a component.

Label: The front-end name for the component. By default, it appears at the top left of the field.

Label Position: Controls the placement of the component label. Options include:

• Top: Displays the label above the component.
• Left (Left-aligned): Displays the label to the left, aligned to the left.
• Left (Right-aligned): Displays the label to the left, aligned to the right.
• Right (Left-aligned): Displays the label to the right, aligned to the left.
• Right (Right-aligned): Displays the label to the right, aligned to the right.
• Bottom: Displays the label below the component.

Label Width & Margin: Allows padding between the label and the component when Left or Right alignment is used.

Placeholder: Provides short descriptive text as a guide for user input.

Description: Displays text below the field for additional details. Accepts HTML formatting.

Tooltip: Adds a question mark icon next to the label, displaying additional help text on hover.

Prefix: Adds text before the input field, e.g., "$" for currency.

Suffix: Adds text after the input field, e.g., "%" for percentage.

Custom CSS Class: Allows applying Bootstrap-based styles to customize the component's appearance.

Tab Index: Configures the tabbing order of fields for improved navigation.

Auto Complete: Enables or disables browser autofill.

Hidden: Hides the component while keeping it part of the form submission data.

Hide Label: Hides the field label to save space.

Hide Input: Masks field input with dots, useful for sensitive data (not encrypted).

Initial Focus: Automatically focuses on this component when the form loads.

Disabled: Prevents user input but retains the field’s value, useful for read-only fields.

Table View: Determines if the component's data should appear in the form submission table.

Modal Edit: Replaces the field with a button that opens a modal for input.