# Show content-control chrome

> Show or hide content-control chrome and respond when someone clicks a structured field in the DOCX.



Content controls are structured fields stored in a DOCX. Their IDs, aliases, tags, types, and content travel with the
document. SuperDoc can draw chrome around those fields so people can recognize and select them in the Editor.

## Try content controls [#try-content-controls]

Expand the Editor and click Acme Inc. or the checkbox. The demo reports the control's alias, tag, and type above the
document.

> **Interactive editor: Try content controls**
>
> Sample: [open the fixture](/fixtures/content-controls-sample.docx).
>
> Preset: `content-controls`.
>
> Content-control configuration available in the interactive Editor:
>
> - **Built-in chrome — `ui.contentControls`:** choose **Show** or **Hide**. The controls remain in the DOCX in either state.
>
> The fixture contains one text control and one checkbox. Clicking either control reports its alias, tag, and type through `onContentControlClick`.
>
> Local DOCX selection: disabled.


Set **Built-in chrome** to **Hide**. The outlines disappear, but the fields and their DOCX metadata remain. Clicking a
field still reports its metadata.

Changing this startup option reloads the current DOCX. Document edits remain, while the selection and last-clicked
status reset.

## Show the built-in chrome [#show-the-built-in-chrome]

Continue with the project from the [Quickstart](/editor/quickstart). Download the content-control sample and save it as
`public/content-controls-sample.docx`:

[Download the content-control sample](/fixtures/content-controls-sample.docx): Text field and checkbox · DOCX


Vite serves that file at `/content-controls-sample.docx`. Content-control chrome is on by default; this example enables
it explicitly and reports the field someone clicks:

**Vanilla — `src/main.ts`**

```ts
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const status = document.querySelector<HTMLOutputElement>('#content-control-status');

const superdoc = new SuperDoc({
  selector: '#editor',
  document: '/content-controls-sample.docx',
  ui: {
    contentControls: true,
  },
  onContentControlClick: ({ target }) => {
    if (!status) return;

    const name = target.alias ?? target.tag ?? target.id;
    status.value = `${name} · tag: ${target.tag ?? 'none'} · type: ${target.controlType}`;
  },
});

window.addEventListener('beforeunload', () => superdoc.destroy());

```

**React — `src/App.tsx`**

```tsx
import { SuperDocEditor, type SuperDocEditorProps } from '@superdoc/react';
import { useCallback, useState } from 'react';
import type { ContentControlClickPayload } from 'superdoc';
import '@superdoc/react/style.css';

const editorConfig = {
  ui: {
    contentControls: true,
  },
} satisfies Pick<SuperDocEditorProps, 'ui'>;

export default function App() {
  const [status, setStatus] = useState('Click a content control.');
  const handleContentControlClick = useCallback(({ target }: ContentControlClickPayload) => {
    const name = target.alias ?? target.tag ?? target.id;
    setStatus(`${name} · tag: ${target.tag ?? 'none'} · type: ${target.controlType}`);
  }, []);

  return (
    <>
      <SuperDocEditor
        document='/content-controls-sample.docx'
        ui={editorConfig.ui}
        onContentControlClick={handleContentControlClick}
      />
      <output aria-live='polite'>{status}</output>
    </>
  );
}

```


Vanilla also needs an Editor mount and a status element:

```html
<div id="editor"></div>
<output id="content-control-status" aria-live="polite">Click a content control.</output>

<script type="module" src="/src/main.ts"></script>

```

Click a control. The status should show the field's alias, tag, and type from `onContentControlClick`.

Set `ui.contentControls: false` when your application should hide only SuperDoc's chrome. The content controls remain
part of the document, and the click callback continues to work.

## Choose the next layer [#choose-the-next-layer]

Use `onContentControlClick` for behavior tied to one click. Use
[custom content-control UI](/editor/custom-ui/content-controls) for a persistent field list, navigation, or
application-owned chrome.

Use the [Document API content-controls reference](/document-api/reference/content-controls/) when code needs to list,
create, update, or remove content controls.