| Name | Description | Default | Type |
|---|---|---|---|
fields* | The set of field values to render in the list. | | FieldValueListItem[] |
className | Additional CSS classes. | | string |
testId | Applies a data-testid attribute to a component's root element and may be utilized as a prefix for descendant elements. Descendant element data-testid attributes are applied in a component to component specific manner. | | string |
variant | Determines if the field and values should be displayed on the same line, or stacked with the field above the value. | 'inline' | FieldValueVariant |'value-comparison' |
FieldValueList
core package4.0.1
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
The FieldValueList component displays a list of attributes and their corresponding values. The information will display in the order that it is provided via the Fields array.
Usage
The FieldValueList component accepts a list of fields, each containing an id, name, and value. The name is restricted to strings only, but the value can be any ReactNode.
FieldValueLists come with three variants that alter the physical appearance of the list: inline, stacked, and value-comparison. The inline and stacked variants may also be applied at an individual item level.
Examples
- ID
- C-1234
- Status
- pending
- Link
- C-ABCOpens in a new tab
- Created
- No Value
- no value
- Name