---
title: "RequiredStatement"
description: "The required statement of the resource, or of the current Canvas, such as an attribution, as a label and value in the reader's language."
url: https://clover.iiif.library.northwestern.edu/docs/primitives/required-statement
version: "4"
---

# RequiredStatement

\<Clover.RequiredStatement /> (web components: \<clover-required-statement>)1 kB added to a page with a Root, gzipped (web components: 7 kB added to a page with a \<clover-root>, styles included, gzipped)

The resource’s required statement, or the current Canvas’s: text that must be shown with it, such as an attribution.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Root iiifContent={url}>
  <Clover.RequiredStatement />
</Clover.Root>
```

**Web components**

```html
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-required-statement></clover-required-statement>
</clover-root>
```

## API reference

Reads `requiredStatement` from the Root’s resource and renders its label and value as [`Metadata` (web components: `<clover-metadata>`)](https://clover.iiif.library.northwestern.edu/docs/primitives/metadata) renders a pair, in a description list. It renders nothing while there is none. Its other props go to the `dl`.

**React**

| Prop        | Type                     | Default      | Description                                                           |
| ----------- | ------------------------ | ------------ | --------------------------------------------------------------------- |
| `of`        | `"manifest" \| "canvas"` | `"manifest"` | Whose statement: the resource’s, or the Canvas the reader is on.      |
| `value`     | `{ label, value }`       | —            | A statement to show instead of the Root’s. Outside a `Root`, the one. |
| `className` | `string`                 | —            | Added to `clover-required-statement`.                                 |

**Web components**

### `<clover-required-statement>`

The required statement: the attribution that must be shown, as a label and its value.

| Name     | Type                                                                           | Default    | Description                                                                                           |
| -------- | ------------------------------------------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------- |
| `of`     | `"manifest" \| "canvas"`                                                       | `manifest` | Whose property: the Manifest's, or the Canvas in view's.                                              |
| `value`  | `string (a URL or JSON)`                                                       | —          | A required statement, instead of the root's: as text, a URL or JSON. Outside a root, the one to show. |
| `.value` | `{ label: Record<string, string[]>; value: Record<string, string[]> } \| null` | —          | As a property: A required statement, instead of the root's.                                           |

## Examples

### With the Body

Show it with what it is about: here, under the Body.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.Body />
<Clover.RequiredStatement />
```

**Web components**

```html
<clover-body></clover-body>
<clover-required-statement></clover-required-statement>
```

### A statement of your own

Give it `value` to show a statement you hold, in a `Root` (web components: `<clover-root>`) or on its own.

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.

**React**

```jsx
<Clover.RequiredStatement
  value={{
    label: { en: ["Attribution"] },
    value: {
      en: [
        "Berliner Tageblatt - Staatsbibliothek zu Berlin - Preußischer Kulturbesitz, via Europeana. Public Domain Mark.",
      ],
    },
  }}
/>
```

**Web components**

```html
<clover-required-statement
  value='{"label":{"en":["Attribution"]},"value":{"en":["Berliner Tageblatt - Staatsbibliothek zu Berlin - Preußischer Kulturbesitz, via Europeana. Public Domain Mark."]}}'></clover-required-statement>
```

## Previous versions

[Clover 3.x › RequiredStatement](https://clover.iiif.library.northwestern.edu/docs/3.x/requiredStatement)

- `requiredStatement` is now `value`; inside a `Root` (web components: `<clover-root>`), leave it out.
- A language’s values are joined with commas: no `customValueDelimiter`.
- 3.x’s `lang` is the Root’s `language`.