Key Value Pair
Key-Value Pair components are ideal for presenting data in a structured format where each item consists of a key (label) and its corresponding value. This component ensures clarity, ease of understanding, and effective information processing by providing a clear and consistent layout.
API Reference
| Prop | Type | Default |
|---|---|---|
orientation | OrientationTypes | vertical |
Usage
General Guidelines
Do's
- Present information clearly and concisely using well-formatted text.
- Use descriptive and meaningful keys.
- Ensure proper alignment of keys and values.
- Group related key-value pairs together.
- Use appropriate color contrast for readability and accessibility.
- Provide tooltips for additional information when necessary.
- Highlight important information using bold text or different colors.
- Validate data to ensure accuracy and consistency.
Don'ts
- Don't overcrowd the component with too many key-value pairs.
- Avoid using vague or unclear keys.
- Don't use excessive jargon or technical terms that may confuse users.
- Don't neglect accessibility features like ARIA labels for screen readers.
- Avoid poor alignment that can lead to confusion.
- Don't overcomplicate values with unnecessary details.
Writing Guidelines
When to use
- When displaying data about an item, such as product specifications or user information.
- For settings pages to display and edit configurations.
- To summarize data in dashboards or reports.
- In forms to summarize user input before submission.
When not to use
- When dealing with large data sets that require more complex structures like tables or charts.
- For displaying rich media content like images or videos.
- When tasks require complex user interactions beyond simple data display.
- When data has complex relationships that cannot be expressed as simple key-value pairs.
Use Case
General Use Cases
- Displaying product information such as price, dimensions, weight, and manufacturer.
- Showing user details like name, email, phone number, and address.
- Summarizing order information such as item names, quantities, prices, and total amount.
- Displaying system or application settings in a structured format.
- Presenting error logs with key information like error code, message, timestamp, and severity.
Digital Health Use Cases
- Displaying patient details such as name, age, medical history, and current medications.
- Summarizing appointment details including date, time, doctor, and location.
- Showing lab test results with key information like test name, result value, and reference range.
- Listing medication information including drug name, dosage, frequency, and instructions.
- Displaying health metrics such as blood pressure, heart rate, glucose levels, and BMI.
- Summarizing insurance details like policy number, provider, coverage type, and expiration date.