Skip to main content

Text Field (Fixed Text) Component

1. Introduction​

The Text Field (Fixed Text) component is a simple yet essential element used to display static text in a fixed format. Unlike editable text fields, this component is non-interactive and cannot be modified by the end-user. It is ideal for displaying instructions, labels, or any other static content that needs to remain consistent across the application.

Purpose and Use Cases​

  • Purpose: The Text Field (Fixed Text) component is used to display static text that provides information or context to users.
  • Primary Use Cases:
    • Displaying instructions or guidelines.
    • Adding labels or descriptions to other components.
    • Presenting static content such as headers, footers, or disclaimers.

Benefits​

  • Clarity: Ensures that important information is displayed consistently and cannot be altered by users.
  • Customizable: Offers extensive styling options to match the application's design.
  • Responsive Design: Works seamlessly across desktop, tablet, and mobile devices.

2. Properties​

The Text Field (Fixed Text) component comes with a few essential properties to configure its functionality. Below is a detailed breakdown:

Code​

  • Description: A unique identifier for the component.
  • Purpose: Used to reference the component programmatically.
  • Required/Optional: Required

Text​

  • Description: The static text to be displayed in the component.
  • Purpose: Provides the content that will be shown to the user.
  • Required/Optional: Required

3. Style​

The Text Field (Fixed Text) component offers extensive styling options to ensure it aligns with the application's design. Below are the key styling properties:

Size and Position​

  • Reset: Resets size and position settings to default.
  • Size:
    • Width & Height: Define the dimensions of the text field.
    • Min Size: Minimum width and height (default: none).
    • Max Size: Maximum width and height (default: none).
  • Position:
    • Alignment: Left, right, top, bottom (default: left, top).
    • X Position: Horizontal offset from the edge.
    • Y Position: Vertical offset from the edge.
  • Z-Index: Specifies the stack order of the text field (default: 0).
  • Fixed Position: Locks the text field's position on the screen (default: OFF).
  • Hidden: Hides the text field from view (default: OFF).

Overflow​

  • Reset: Resets overflow settings to default.
  • Options: Normal, On Hover, On Focus, When Active.
    • Overflow X: Controls horizontal overflow (visible, hidden, scroll, auto, initial, inherit).
    • Overflow Y: Controls vertical overflow (visible, hidden, scroll, auto, initial, inherit).

Border​

  • Reset: Resets border settings to default.
  • Options: Normal, On Hover.
    • Edges: Left, right, top, bottom, or all edges.
    • Type: None, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit (default: none).
    • Color: Hexadecimal color code with a color picker.
    • Width: Border width in pixels.
    • Radius: Corner radius for rounded edges (default: none).

Padding​

  • Reset: Resets padding settings to default.
  • Options: Normal, On Hover.
    • Sides: Left, right, top, bottom, or all edges.
    • Size: Padding size in pixels.

Background​

  • Reset: Resets background settings to default.
  • Normal:
    • Background Color: Hexadecimal color code with a color picker (default: none).
    • Source: Media library or HTTP URL.
    • Attachment: Scroll, fixed, local, initial, inherit.
    • Position: X and Y positions in pixels (default: 0).
    • Repeat: Repeat, repeat-x, repeat-y, no-repeat, initial, inherit.
    • Size: Auto, length, cover, contain, initial, inherit.
    • Origin: Border-box, padding-box, content-box, initial, inherit.
  • On Hover:
    • Same properties as "Normal" but applied when the text field is hovered.

Shadow​

  • Reset: Resets shadow settings to default.
  • Options: Normal, On Hover.
    • Color: Hexadecimal color code with a color picker (default: none).
    • Offset X: Horizontal spacing in pixels.
    • Offset Y: Vertical spacing in pixels.
    • Blur Radius: The amount of blur applied to the shadow.
    • Spread Radius: The size of the shadow spread.
    • Inset: Applies the shadow inside the element (default: OFF).

Cursor​

  • Reset: Resets cursor settings to default.
  • Options: Auto, default, none, context-menu, help, pointer, progress, wait, cell, crosshair, text, vertical-text, alias, copy, move, no-drop, not-allowed, grab, wait, all-scroll, col-resize, row-resize, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize, ew-resize, ns-resize, neswe-resize, nesw-resize, zoom-in, zoom-out.

Font​

  • Reset: Resets font settings to default.
  • Options: Normal, On Hover, On Focus.
    • Font Size: Pixels (default: 14).
    • Letter Spacing: Number expressed in em, px, or rem units.
    • Word Spacing: Number expressed in em, px, or rem units.
    • Line Height: Number expressed in em, px, or rem units.
    • Weight: Thin, light, extra light, normal, medium, semi-bold, bold, extra bold, black (default: normal).
    • Color: Hexadecimal color code with a color picker (default: none).
    • Text Decoration: Line, style, thickness, and color options.
    • White Space: Normal, no wrap, pre, pre-wrap, pre-line, break spaces, collapse balance.
    • Word Break: Normal, break all, keep all, auto phrase, break word, inherit.

4. Actions​

The Text Field (Fixed Text) component does not support any actions, as it is a static, non-interactive element.

5. Best Practices for UI/UX​

When and Why to Use​

  • Use the Text Field (Fixed Text) component to display static information that does not require user interaction.
  • Ideal for providing instructions, labels, or contextual information.

Effective Scenarios​

  • Desktop: Use for headers, footers, or static labels in forms.
  • Tablet/Smartphone: Ensure the text is legible and responsive on smaller screens.

Tips for Optimal Use​

  • Use concise and clear text to convey information effectively.
  • Style the text field to match the application's overall design.
  • Ensure the text is accessible and readable across all devices.

6. Security Considerations​

Potential Risks​

  • External Resources: Validate any external resources used for backgrounds or media to ensure they are trustworthy.

Best Practices​

  • Use HTTPS for secure communication when loading external resources.
  • Test the text field's responsiveness and behavior across different devices and screen sizes.