Design
Guide

OXD Introduction Design Thinking UX Standards
UX Guidelines Form Design Patterns UX Rules & Laws Keyboard Accessibility
Visual Design
Colors Typograpy Images Icons Motion Animations
Grid & Layout
Main Layouts Grid System
Navigations
Sidebar Topbar Stepper
Components
Buttons Text-box Check-box Radio Radio Pils Switch Search-box Multi Select Dropdown Number Dropdown Upload Inputs Upload input box Date picker Time picker Color picker Labels Help Lable Status lable Group Input Group Overlay Scroll-bar Count Slider Text-area Comment-box Paginations Card loader Divider
Tables & List View Cards & Shapes Modals & Popups Advance Componnets Charts
UI Behaviours
QA Standards
UI Behaviours
This section outlines the expected interactive behaviors and user interface responses that enhance usability and provide a consistent user experience. These include features like auto-save, drag and drop, inline validation, loading indicators etc
Auto-Save
Auto-save automatically stores user inputs without requiring a manual save action.

Best Practices
  1. Changes are auto-saved within 700ms after user input stops or on focus out of the field.
  2. Once the save is triggered, the status changes to "Saving…" accompanied by a spinner or loading icon.
  3. After a successful save, it transitions to "Saved" with a cloud-check icon. The label disappears after 3 seconds, but the cloud-check icon remains visible until the next save is triggered
  4. In case of a failed save, a warning or error icon and failed label is shown along with a tooltip or inline message to indicate the issue.
The auto-save indicator must be placed in a fixed header

If the content area is scrollable and a fixed header cannot be defined, auto-save should not be implemented.In such cases, manual save actions (with Save/Submit buttons) offer clearer control and feedback.

When a screen contains multiple sections or cards If a generic fixed header cannot be applied then each card should act as an independent unit. The header of the most recently interacted input will display the saving indicator based on the active field

Where to Use
  1. Users enter complex or multi-step data (e.g., performance forms, vacancies)
  2. There’s a risk of accidental data loss (e.g., session timeout, navigation)
  3. Drafting or editing takes time
  4. Long forms with sections, weights, and questions
  5. Multiple steps with flow mapping
  6. Form builders with drag-drop interactions
Where Not to Use
  1. Quick Actions (e.g., Approvals/Rejections)- one click decisions where users expect an immediate effect.
  2. Short forms with a few fixed inputs, often visited by Admins infrequently, with minimal effort to re-enter if needed

In summary, auto-save should support long, error-prone, or multi-step tasks — not fast, decisive, or low-risk interactions.

Drag & Drop
Use drag and drop when it improves user efficiency and aligns with the mental model of “moving” or “organizing” items.
Suitable scenarios:Reordering items,Assigning items to a container,Arranging visual structures

Best Practices
  1. Drag Handle: Use a consistent icon (e.g., ☰ or ⁝⁝) on the draggable item to indicate it's movable.
  2. Hover Effect: Change cursor to grab or grabbing on hover.
  3. Drop Zone Highlight: When dragging over a valid target, visually highlight the drop zone (represnt target zone with a blue line in forms/background color in other views)
  4. Placeholder: Show a placeholder in the drop area to indicate where the item will be inserted.
Expand & Collapse
This is a common UI pattern for managing large or grouped content areas. It allows users to expand or collapse individual sections/ all sections based on their need for visibility and focus.

Collapsed View

In the collapsed view, only the section titles are shown. (The number of visible items within a collapsed row may vary depending on the context or design requirements.) Each section includes a chevron icon indicating expandability.

Expanded View

In the expanded state, full content is revealed for the selected section. The chevron icon rotates upward to visually indicate the expanded state.

Expand All/Collapse All

A button is provided to handle both “Expand All” and “Collapse All” actions. When all sections are expanded, the button label automatically updates to “Collapse All”.

Loader in Collapsed View

When expanded section data takes time to load, a loader is shown within the collapsed view itself to proactively inform users that background loading is in progress

Modal Open/Close Logic
Opening a Modal

Modals should be triggered by clearly labeled buttons, links, or actions. Focus should automatically shift to the first focusable element inside the modal (input field, button).

Closing a Modal

The modal can be closed through multiple user-initiated actions,

  • Clicking the close icon (usually in the top-right corner).
  • Clicking on a cancel or close button inside the modal.
  • Pressing the ESC key.
  • Clicking outside the modal (only if modal is non-critical or optional).
  • Focus should return to the element that triggered the modal upon close.
  • If closing causes data loss or exits a critical process, a confirmation prompt must appear.
    • Input Validation Triggers
  • Show clear and specific error messages near the field.(“This question already exists in the section ” instead of just “Already exists”)
  • Use color and iconography consistently (red border/ warning icon)
  • Allow the user to easily locate and correct invalid fields.
  • Prioritize error prevention over error handling
    • Active Status Indication
  • A green dot appears next to the "Filters" and "Configurations" buttons when criteria are actively applied
  • Hovering over either button reveals a compact inline panel labeled "Filters Applied" or "Configurations Applied," summarizing all active selections without requiring users to open a modal
  • Each criterion includes an 'x' icon to remove it individually. A "Reset" button within the panel allows users to clear all filters or configurations at once.