Display-only Fields

A displayOnly field renders UI inside the editor form without storing any data. Use it to show instructions, contextual help, links to documentation, or warnings alongside the fields an editor is filling in.

Because nothing is persisted, displayOnly fields don't appear in your content files or in the GraphQL schema... they exist purely to shape the editing experience.

Type Definition

For additional properties common to all Field types, check the Field type definition.

Display-only fields are presentation-only, so list, required, and indexed are not supported on this field type. label is silently ignored — the component handles all rendering.

Examples

Info box (built-in helper)

TinaCMS ships an InfoBox helper for the common case of showing a short message, optionally with links. Import it from tinacms and pass it as ui.component.

Figure: Author form with an InfoBox reminder above the Bio field

Info box with links

InfoBox accepts an optional links array so editors can jump straight to relevant documentation or style guides.

Figure: Blog post form with an InfoBox showing image guidelines and two links above the Hero Image field

Custom component

For anything beyond a message + links, pass your own React component. Display-only components don't receive input values… they're purely presentational.

Figure: Landing page form with a custom SEO checklist component rendered below the Meta Description field

When to reach for displayOnly vs. a custom component

If you need to replace the UI of a field that stores data (e.g. a custom slider for a number, or a color picker for a string), use React Components.

If you need to add UI to the form that doesn't store data, instructions, warnings, quick links, reach for displayOnly.