> ## Documentation Index
> Fetch the complete documentation index at: https://docs.alumio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# By key-value structure

> Accesses values in a list where each item has a configurable key field and value field.

export const FormField = ({property, label, required = false, diType, uiPatterns, children}) => {
  const patterns = Array.isArray(uiPatterns) ? uiPatterns : uiPatterns ? [uiPatterns] : [];
  return <div style={{
    margin: '1.5rem 0'
  }}>
      <div style={{
    display: 'flex',
    alignItems: 'baseline',
    flexWrap: 'wrap',
    gap: '0.5rem',
    marginBottom: '0.25rem'
  }}>
        <strong>{label}</strong>
        <span style={{
    fontSize: '0.7rem',
    fontWeight: 600,
    textTransform: 'uppercase',
    letterSpacing: '0.04em',
    color: required ? '#6241f5' : '#6b7280'
  }}>
          {required ? 'Required' : 'Optional'}
        </span>
      </div>

      <div>{children}</div>

      {diType || patterns.length > 0 ? <p style={{
    fontSize: '0.85rem',
    color: '#6b7280',
    marginBottom: 0
  }}>
          {diType ? <>
              See the <a href={`/references/${diType}`}>{diType}</a> reference.{' '}
            </> : null}
          {patterns.length > 0 ? <>
              Accepts a <a href={`/documentation/placeholders-and-patterns/patterns#${patterns[0]}`}>pattern</a>.
            </> : null}
        </p> : null}
    </div>;
};

Accesses values in a list where each item has a configurable key field and value field. Use this when your data holds a list of items that each carry their own name and value, such as a product's custom attributes or a set of option lines, and you want to turn that list into a simple lookup map where each name points straight to its value.

This documentation describes: [Schema](/schemas/accessor/structure)

## Fields

<FormField property="key" label="Key" required uiPatterns="path">
  The path, within each item of the list, to the value that should become the key in the result. For a list of attribute items this is typically the attribute's code or name, for example `code`. See [Placeholders](/references/placeholders) for the full syntax.
</FormField>

<FormField property="value" label="Value" required uiPatterns="path">
  The path, within each item of the list, to the value that should sit under that key in the result, for example `value`.
</FormField>

<FormField property="root" label="Root">
  The dot-notated base path that points at the list of items to read. Leave it empty to use the top level of your data, or set it to, for example, `attributes` when the items live inside an `attributes` list.
</FormField>

<FormField property="keys" label="Keys">
  A list of keys that limits which entries are returned from the built lookup map. Leave it empty to return every entry.
</FormField>

## Sample data

| Field | Value        |
| ----- | ------------ |
| Key   | `code`       |
| Value | `value`      |
| Root  | `attributes` |

Input:

```json theme={null}
{
    "attributes": [
        { "code": "color", "value": "Navy" },
        { "code": "material", "value": "Wool" },
        { "code": "size", "value": "M" }
    ]
}
```

Output:

```json theme={null}
{
    "color": "Navy",
    "material": "Wool",
    "size": "M"
}
```

```json Configuration theme={null}
{
  "prototype": "structure",
  "parameters": {
    "key": "code",
    "value": "value",
    "root": "attributes"
  }
}
```