terra-clinical-label-value-view/src/terra-dev-site/doc/clinical-label-value-view/clinicalLabelValueView.1.doc.mdx

The label value view component displays a label and the associated value or list of values underneath the label.

import { Badge } from 'terra-clinical-label-value-view/package.json?dev-site-package';

import LabelValueViewTextTermAndDef from '../example/LabelValueViewTextTermAndDef?dev-site-example';
import LabelValueViewTextDefinitionList from '../example/LabelValueViewTextDefinitionList?dev-site-example';
import LabelValueViewNode from '../example/LabelValueViewNode?dev-site-example';
import LabelValueViewNodeCustom from '../example/LabelValueViewNodeCustom?dev-site-example';

import LabelValueViewPropsTable from 'terra-clinical-label-value-view/src/LabelValueView?dev-site-props-table';

<Badge />

# Terra Clinical Label Value View

The LabelValueView component creates a visual and programmatic association of a label-value pair. An HTML description list is used to create the programmatic structure of the label to a value. This semantic structure is critical to support users of assistive technology. 

LabelValueView can be used as a single description list with one label-value pair or as a group of related label-value pairs.
- To use LabelValueView as a description list with a single label-value pair, ensure the `isChildOfDescriptionList` prop is `false`.
- If multiple LabelValueViews are used as a group, then the best practice is to encapsulate them within a single description list `<dl>` element. LabelValueView does not need a dedicated description list and can be added to an existing one. To use LabelValueView as a child of a description list, the `isChildOfDescriptionList` prop needs to be set to `true` .

It is highly recommended to add an element that describes the topic of the description list, such as a heading.

LabelValueViews and the encapsulating description lists are often visually associated with a topic on the page. It is best practice to programmatically associate the LabelValueView with the ID of the element that labels it on the page by using one of the following methods:
- If the `isChildOfDescriptionList` prop is set to `false`, associate the list by setting the `ariaLabelledBy` prop to the ID of the topic.
- If the `isChildOfDescriptionList` prop is set to `true` associate the description list with the label using the `aria-labelledby` attribute on the description list that points to the ID of the topic.

## Getting Started

- Install with [npmjs](https://www.npmjs.com):
  - `npm install terra-clinical-label-value-view`

## Usage
```jsx
import LabelValueView from 'terra-clinical-label-value-view';
```

## Component Features
* [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
* [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
* [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)

## Examples
<LabelValueViewTextTermAndDef title="Label Value View with a Text Input (as a term and definition)" />
<LabelValueViewTextDefinitionList title="Label Value View with a Text Input (as a description list)" />
<LabelValueViewNode title="Label Value View with a Node Input" />
<LabelValueViewNodeCustom title="Label Value View with a Node Input (Custom)" />

## Label Value View Props
<LabelValueViewPropsTable />