> ## 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.

# Format to YAML

> Converts the context data into a YAML string.

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>;
};

Converts the context data into a YAML string. Use this when a target system or file expects YAML, a plain-text format that is easy for both people and machines to read. It takes the structured data you have built up in your flow and writes it out as indented YAML text. There is nothing to configure: the output uses standard indentation and keeps nested data readable.

This documentation describes: [Schema](/schemas/serializer/yaml)

## Sample data

Input:

```json theme={null}
{
    "id": 1024,
    "customer": "Maria",
    "lines": ["Wool scarf", "Leather belt"]
}
```

Output:

```yaml theme={null}
id: 1024
customer: Maria
lines:
    - 'Wool scarf'
    - 'Leather belt'
```

```json Configuration theme={null}
{
  "prototype": "yaml",
  "parameters": {}
}
```