Malaysian Government Design System (MYDS)

MYDS provides a comprehensive component library designed to help developers build consistent, accessible, and visually engaging applications for the Malaysian government and its agencies. The library includes approximately 40 meticulously designed components that adhere to the MYDS Design Language.

Key features include:

• Consistency: Components are designed to work seamlessly together for a uniform look and feel.
• Accessibility: Built with accessibility in mind to ensure usability for all users, including those with disabilities.
• Flexibility: Allows for customization to meet specific branding and functional requirements while maintaining design language integrity.
• Documentation: Comprehensive documentation and examples are provided for every component to facilitate integration.

The Malaysia Government Design System (MYDS) is a collection of standard tools, templates, and guidelines designed to help government agencies build high-quality, accessible, and consistent digital services. It provides a unified framework to ensure digital platforms are user-friendly and reflect values like transparency and inclusivity.

Core Pillars of MYDS

• Components: Pre-built UI elements (buttons, forms, navigation bars) for consistent interface building.
• Theme Customizer: A tool to adjust colors and styles to match specific agency branding while maintaining the MYDS unified look.
• Patterns: Ready-to-use layouts and design patterns for common scenarios like login screens or data forms.
• Design File: A comprehensive Figma-based design system containing all assets, components, and guidelines for prototyping.

The Malaysian Government Design System (MYDS) provides two primary resources:

1. Design Language Guideline: For designers and project managers, covering principles, standards, and best practices for cohesive user interfaces.
2. Component Library: For developers, providing reusable UI components that adhere to the design language.

Access the documentation via the following links:

• Design Guideline: https://design.digital.gov.my/en/docs/design
• Component Library: https://design.digital.gov.my/en/docs/develop

A Text Input Group combines related elements to guide data entry. It consists of:

1. Field label: A description of the input's purpose.
2. Input field: The primary area for data entry (can be a single-line textfield or a multi-line textarea).
3. Hint text: Provides guidance or feedback. There are two types:
   • Helper: Instructions or examples to assist entry.
   • Error: Messages displayed when validation fails.

Hint Text Configuration

• Hint order: Hint text can be positioned either ABOVE or BELOW the textfield.
• Hint type: Can be styled as Default hint text or Error hint text.

The AlertDialog follows a specific structural hierarchy. While the exact implementation of sub-components like AlertDialogBody or AlertDialogHeader may vary based on the specific version, the standard composition pattern is as follows:

export default () => (
  <AlertDialog>
    <AlertDialogTrigger />
    <AlertDialogBody>
      <AlertDialogHeader>
        <AlertDialogTitle />
      </AlertDialogHeader>
      <AlertDialogContent>
        <AlertDialogDescription />
      </AlertDialogContent>
      <AlertDialogFooter>
        <AlertDialogClose />
      </AlertDialogFooter>
    </AlertDialogBody>
  </AlertDialog>
);

When designing user interfaces within the MYDS framework, implement a hierarchical structure by dividing the UI into smaller, logical subsystems. This approach improves manageability and user comprehension.

Key objectives of hierarchical structure:

• Interaction Management: Organizes how users interact with the application and how the application handles information and functions.
• Navigation & Discovery: Enables users to navigate smoothly, find required information, and use application functions efficiently.

Implementation Pattern: Break down large interfaces into primary sections (e.g., Home, Products, Cart, Account) and further subdivide those into smaller subsystems (e.g., Product List, Product Details, Checkout Process).

The Character Count component is used to track the number of characters entered into a text area. It provides real-time feedback to help users stay within defined limits. It is typically implemented as an addition to an existing Text Area, displaying a dynamic hint below the input field.

Anatomy

1. Text Input Area: The primary field where users enter text.
2. Hint Under: A text element below the input that dynamically shows the remaining character count.
3. Counter: Displays the remaining characters in descending order (e.g., 200, 199...0).

The Checkbox component allows users to make binary choices. It supports several key properties and states to handle different user interactions and data models:

Properties

• checked: A boolean property. When true, the checkbox is selected and displays a checkmark. When false, it is unselected.
• indeterminate: Represents a mixed or partial selection state (often indicated by a dash). This is used for hierarchical selections where some, but not all, sub-items are selected.

States

The component visualizes different states to indicate current status, including selected, unselected, and indeterminate states.

Layout Elements

• Label size: The checkbox and its associated text label can be scaled to fit various form sizes.
• Hint text: Additional guidance or information can be placed under the checkbox label to assist the user.