Disclosure

A collapsible section built on `<details>`, animating between open and closed.

import { Disclosure } from "@sanity/sanity-id/components/disclosure"

Props

Also accepts every prop of ComponentProps<"details">.

Disclosure props
PropTypeDescription
summary (required)string

Clickable summary text shown when the disclosure is collapsed

childrenReactNode

Content shown when the disclosure is expanded

disableAnimationsboolean

Disables animation when opening and closing the disclosure contents. Note animations only work in browsers that support interpolate-size

Required.

Usage

Disclosure with short content

Occaecat dolor ipsum sint labore deserunt elit nulla duis anim ut sit fugiat eiusmod dolore Lorem. Dolore consectetur cillum commodo sint in velit magna duis nisi nisi fugiat dolor culpa. Veniam nostrud id deserunt nulla sit aliqua nostrud nostrud dolor elit voluptate veniam tempor. Veniam Lorem qui sunt. In laborum ea consequat nisi sunt anim labore consequat officia pariatur laborum ullamco voluptate labore sit. Magna do non enim reprehenderit laborum duis. Nulla voluptate cillum adipisicing. Amet voluptate fugiat et.

Disclosure with long summary. Irure culpa nulla est. Eu adipisicing magna irure qui duis culpa elit exercitation veniam culpa do eiusmod ullamco.

Enim veniam cillum aliquip culpa est cupidatat reprehenderit deserunt reprehenderit id esse esse. Laborum voluptate laboris amet proident. Officia cupidatat culpa deserunt excepteur sunt esse sit sit sit dolor labore ex ex ullamco Lorem. Ullamco culpa anim irure culpa irure proident do mollit sint deserunt. Deserunt et et incididunt veniam consequat sint voluptate quis ea commodo. Deserunt fugiat id dolor sit. Nulla incididunt nostrud anim consectetur consectetur non. Ad aliqua fugiat magna officia et.

Exercitation enim adipisicing minim sint. Excepteur reprehenderit excepteur consectetur nisi consectetur. Ullamco minim sint exercitation reprehenderit deserunt et eiusmod laborum laborum. Reprehenderit fugiat amet incididunt et eiusmod.

Nulla voluptate laboris aliqua. Adipisicing Lorem irure reprehenderit pariatur eiusmod do consequat do consequat aute. Pariatur officia culpa est ad pariatur velit velit. Consequat amet occaecat exercitation esse eu mollit amet esse fugiat deserunt. Nisi Lorem dolore amet labore duis commodo aute. Velit pariatur ut sit velit esse proident sunt nisi culpa occaecat.

Disclosure with long content

Esse qui aliqua quis elit duis ut ullamco ullamco culpa laborum adipisicing consectetur excepteur dolor. Mollit quis aute deserunt. Id aliqua sit dolor elit eu laborum culpa. Officia mollit nulla anim ex culpa reprehenderit sit non et. Culpa exercitation eu in pariatur ullamco mollit pariatur amet. Qui aliqua est nostrud amet cillum. Amet enim duis commodo officia irure id adipisicing ullamco dolor labore. Pariatur adipisicing occaecat reprehenderit laborum incididunt nisi do consectetur mollit reprehenderit.

Fugiat eu ea dolor cillum irure fugiat labore adipisicing officia irure consectetur enim et. Dolore occaecat velit veniam ex labore ex ex est dolor sint. Officia enim aliqua ea cillum. Culpa laborum occaecat aute magna irure ad fugiat est culpa amet excepteur. Dolore Lorem ea ut aliqua reprehenderit deserunt nostrud excepteur aliquip ut sit. Magna magna veniam consectetur mollit mollit excepteur irure Lorem ad eu est ad dolore elit. Cillum anim et proident commodo sit laborum duis quis voluptate minim sunt in et officia. Anim excepteur magna sint id anim consequat non incididunt esse consectetur laborum esse pariatur est sunt.

Proident excepteur irure amet nulla nisi et esse quis. Excepteur do culpa laborum magna dolor Lorem proident cupidatat voluptate ad tempor. Veniam nostrud enim sint mollit sunt ex dolor dolor est ullamco. Duis laboris amet amet amet incididunt dolor esse pariatur exercitation. Amet nulla ad adipisicing cupidatat incididunt occaecat mollit in enim amet enim exercitation veniam adipisicing sint. Reprehenderit cillum minim aliqua aliqua amet cupidatat. Est excepteur culpa eiusmod.

Irure consequat et consectetur ullamco deserunt deserunt nostrud in. Excepteur non et sint nisi dolore. In sit voluptate enim dolor minim laborum sint ea aliqua consectetur excepteur tempor. Qui enim consequat aliqua et officia excepteur. Nulla do aute esse ullamco culpa mollit nostrud officia elit fugiat nostrud elit anim. Sunt nostrud incididunt ea esse adipisicing cupidatat pariatur duis eiusmod sunt anim do sit.

Id mollit officia deserunt minim qui consequat velit. Esse minim officia sunt ad amet laboris Lorem cillum proident duis laboris cillum. Ad ipsum nostrud nulla consequat occaecat laboris nisi fugiat magna do sit cillum. Officia id esse magna ex et ut sit qui ut. Cupidatat mollit cupidatat proident enim excepteur. Labore Lorem ullamco ea ut commodo elit qui. Officia nisi reprehenderit ut nulla enim commodo qui laborum. Occaecat cillum anim consequat elit non exercitation.

Aliquip proident sit fugiat nisi fugiat qui minim. Cillum ea enim consequat enim nulla quis pariatur. Incididunt proident tempor consectetur et cillum culpa consectetur amet excepteur magna duis ad amet laboris. Magna dolore anim eiusmod laborum laboris sint consectetur exercitation exercitation. Anim nulla sint nostrud quis sunt anim.

Eu proident aliquip non ullamco ut ullamco pariatur est in do duis nulla. Anim consequat aliqua amet velit ad ea exercitation consectetur dolor culpa magna sit in ipsum. Do irure aliqua irure eu proident minim deserunt mollit cupidatat velit. Laboris mollit duis ullamco ullamco nostrud ut officia et ad duis velit incididunt quis nostrud.

Incididunt fugiat do id consectetur aute commodo et eu. Ad ex ut nisi enim esse dolor. Officia sint culpa quis quis excepteur ad in. Cupidatat eu commodo reprehenderit culpa sit amet officia eiusmod reprehenderit ut cillum elit. Amet cillum reprehenderit esse do id cupidatat ex nulla dolor ex veniam labore adipisicing fugiat aliqua. Exercitation sint cillum quis dolor aute adipisicing.

Fugiat reprehenderit irure id Lorem do sint excepteur excepteur duis nulla eu tempor nisi commodo. Reprehenderit in sit pariatur officia. Labore excepteur minim laborum Lorem aliqua elit cupidatat anim aliqua id incididunt. Magna incididunt ut sunt velit adipisicing commodo nulla labore ipsum consectetur consequat proident qui fugiat nostrud. Mollit minim veniam cillum pariatur. Deserunt sunt voluptate enim proident consequat esse Lorem excepteur nulla voluptate sit minim occaecat quis consequat. Anim labore reprehenderit pariatur aute voluptate do esse elit ut.

Irure sit minim quis nostrud officia duis laboris cillum elit deserunt. Eu est anim ex. Nostrud tempor ex magna ad sit dolor. Ad ullamco cillum adipisicing in eu sint velit laboris eiusmod anim cillum aliqua consequat ex. Mollit eiusmod cillum dolor elit sit fugiat sint occaecat officia tempor anim. Minim cupidatat duis incididunt sint commodo mollit aliqua ipsum. Veniam esse occaecat qui elit laborum veniam culpa exercitation in laborum fugiat culpa anim.

1import { Disclosure } from "@sanity/sanity-id/components/disclosure"
2
3export default () => {
4        return (
5          <div>
6            <Disclosure summary="Disclosure with short content">
7              <p>
8                Occaecat dolor ipsum sint labore deserunt elit nulla duis anim ut
9                sit fugiat eiusmod dolore Lorem. Dolore consectetur cillum commodo
10                sint in velit magna duis nisi nisi fugiat dolor culpa. Veniam
11                nostrud id deserunt nulla sit aliqua nostrud nostrud dolor elit
12                voluptate veniam tempor. Veniam Lorem qui sunt. In laborum ea
13                consequat nisi sunt anim labore consequat officia pariatur laborum
14                ullamco voluptate labore sit. Magna do non enim reprehenderit
15                laborum duis. Nulla voluptate cillum adipisicing. Amet voluptate
16                fugiat et.
17              </p>
18            </Disclosure>
19            <Disclosure summary="Disclosure with long summary. Irure culpa nulla est. Eu adipisicing magna irure qui duis culpa elit exercitation veniam culpa do eiusmod ullamco.">
20              <p>
21                Enim veniam cillum aliquip culpa est cupidatat reprehenderit
22                deserunt reprehenderit id esse esse. Laborum voluptate laboris amet
23                proident. Officia cupidatat culpa deserunt excepteur sunt esse sit
24                sit sit dolor labore ex ex ullamco Lorem. Ullamco culpa anim irure
25                culpa irure proident do mollit sint deserunt. Deserunt et et
26                incididunt veniam consequat sint voluptate quis ea commodo. Deserunt
27                fugiat id dolor sit. Nulla incididunt nostrud anim consectetur
28                consectetur non. Ad aliqua fugiat magna officia et.
29              </p>
30              <p>
31                Exercitation enim adipisicing minim sint. Excepteur reprehenderit
32                excepteur consectetur nisi consectetur. Ullamco minim sint
33                exercitation reprehenderit deserunt et eiusmod laborum laborum.
34                Reprehenderit fugiat amet incididunt et eiusmod.
35              </p>
36              <p>
37                Nulla voluptate laboris aliqua. Adipisicing Lorem irure
38                reprehenderit pariatur eiusmod do consequat do consequat aute.
39                Pariatur officia culpa est ad pariatur velit velit. Consequat amet
40                occaecat exercitation esse eu mollit amet esse fugiat deserunt. Nisi
41                Lorem dolore amet labore duis commodo aute. Velit pariatur ut sit
42                velit esse proident sunt nisi culpa occaecat.
43              </p>
44            </Disclosure>
45            <Disclosure summary="Disclosure with long content">
46              <p>
47                Esse qui aliqua quis elit duis ut ullamco ullamco culpa laborum
48                adipisicing consectetur excepteur dolor. Mollit quis aute deserunt.
49                Id aliqua sit dolor elit eu laborum culpa. Officia mollit nulla anim
50                ex culpa reprehenderit sit non et. Culpa exercitation eu in pariatur
51                ullamco mollit pariatur amet. Qui aliqua est nostrud amet cillum.
52                Amet enim duis commodo officia irure id adipisicing ullamco dolor
53                labore. Pariatur adipisicing occaecat reprehenderit laborum
54                incididunt nisi do consectetur mollit reprehenderit.
55              </p>
56              <p>
57                Fugiat eu ea dolor cillum irure fugiat labore adipisicing officia
58                irure consectetur enim et. Dolore occaecat velit veniam ex labore ex
59                ex est dolor sint. Officia enim aliqua ea cillum. Culpa laborum
60                occaecat aute magna irure ad fugiat est culpa amet excepteur. Dolore
61                Lorem ea ut aliqua reprehenderit deserunt nostrud excepteur aliquip
62                ut sit. Magna magna veniam consectetur mollit mollit excepteur irure
63                Lorem ad eu est ad dolore elit. Cillum anim et proident commodo sit
64                laborum duis quis voluptate minim sunt in et officia. Anim excepteur
65                magna sint id anim consequat non incididunt esse consectetur laborum
66                esse pariatur est sunt.
67              </p>
68              <p>
69                Proident excepteur irure amet nulla nisi et esse quis. Excepteur do
70                culpa laborum magna dolor Lorem proident cupidatat voluptate ad
71                tempor. Veniam nostrud enim sint mollit sunt ex dolor dolor est
72                ullamco. Duis laboris amet amet amet incididunt dolor esse pariatur
73                exercitation. Amet nulla ad adipisicing cupidatat incididunt
74                occaecat mollit in enim amet enim exercitation veniam adipisicing
75                sint. Reprehenderit cillum minim aliqua aliqua amet cupidatat. Est
76                excepteur culpa eiusmod.
77              </p>
78              <p>
79                Irure consequat et consectetur ullamco deserunt deserunt nostrud in.
80                Excepteur non et sint nisi dolore. In sit voluptate enim dolor minim
81                laborum sint ea aliqua consectetur excepteur tempor. Qui enim
82                consequat aliqua et officia excepteur. Nulla do aute esse ullamco
83                culpa mollit nostrud officia elit fugiat nostrud elit anim. Sunt
84                nostrud incididunt ea esse adipisicing cupidatat pariatur duis
85                eiusmod sunt anim do sit.
86              </p>
87              <p>
88                Id mollit officia deserunt minim qui consequat velit. Esse minim
89                officia sunt ad amet laboris Lorem cillum proident duis laboris
90                cillum. Ad ipsum nostrud nulla consequat occaecat laboris nisi
91                fugiat magna do sit cillum. Officia id esse magna ex et ut sit qui
92                ut. Cupidatat mollit cupidatat proident enim excepteur. Labore Lorem
93                ullamco ea ut commodo elit qui. Officia nisi reprehenderit ut nulla
94                enim commodo qui laborum. Occaecat cillum anim consequat elit non
95                exercitation.
96              </p>
97              <p>
98                Aliquip proident sit fugiat nisi fugiat qui minim. Cillum ea enim
99                consequat enim nulla quis pariatur. Incididunt proident tempor
100                consectetur et cillum culpa consectetur amet excepteur magna duis ad
101                amet laboris. Magna dolore anim eiusmod laborum laboris sint
102                consectetur exercitation exercitation. Anim nulla sint nostrud quis
103                sunt anim.
104              </p>
105              <p>
106                Eu proident aliquip non ullamco ut ullamco pariatur est in do duis
107                nulla. Anim consequat aliqua amet velit ad ea exercitation
108                consectetur dolor culpa magna sit in ipsum. Do irure aliqua irure eu
109                proident minim deserunt mollit cupidatat velit. Laboris mollit duis
110                ullamco ullamco nostrud ut officia et ad duis velit incididunt quis
111                nostrud.
112              </p>
113              <p>
114                Incididunt fugiat do id consectetur aute commodo et eu. Ad ex ut
115                nisi enim esse dolor. Officia sint culpa quis quis excepteur ad in.
116                Cupidatat eu commodo reprehenderit culpa sit amet officia eiusmod
117                reprehenderit ut cillum elit. Amet cillum reprehenderit esse do id
118                cupidatat ex nulla dolor ex veniam labore adipisicing fugiat aliqua.
119                Exercitation sint cillum quis dolor aute adipisicing.
120              </p>
121              <p>
122                Fugiat reprehenderit irure id Lorem do sint excepteur excepteur duis
123                nulla eu tempor nisi commodo. Reprehenderit in sit pariatur officia.
124                Labore excepteur minim laborum Lorem aliqua elit cupidatat anim
125                aliqua id incididunt. Magna incididunt ut sunt velit adipisicing
126                commodo nulla labore ipsum consectetur consequat proident qui fugiat
127                nostrud. Mollit minim veniam cillum pariatur. Deserunt sunt
128                voluptate enim proident consequat esse Lorem excepteur nulla
129                voluptate sit minim occaecat quis consequat. Anim labore
130                reprehenderit pariatur aute voluptate do esse elit ut.
131              </p>
132              <p>
133                Irure sit minim quis nostrud officia duis laboris cillum elit
134                deserunt. Eu est anim ex. Nostrud tempor ex magna ad sit dolor. Ad
135                ullamco cillum adipisicing in eu sint velit laboris eiusmod anim
136                cillum aliqua consequat ex. Mollit eiusmod cillum dolor elit sit
137                fugiat sint occaecat officia tempor anim. Minim cupidatat duis
138                incididunt sint commodo mollit aliqua ipsum. Veniam esse occaecat
139                qui elit laborum veniam culpa exercitation in laborum fugiat culpa
140                anim.
141              </p>
142            </Disclosure>
143          </div>
144        )
145      }
Disabling opening/closing animations
Disclosure with short content

Occaecat dolor ipsum sint labore deserunt elit nulla duis anim ut sit fugiat eiusmod dolore Lorem. Dolore consectetur cillum commodo sint in velit magna duis nisi nisi fugiat dolor culpa. Veniam nostrud id deserunt nulla sit aliqua nostrud nostrud dolor elit voluptate veniam tempor. Veniam Lorem qui sunt. In laborum ea consequat nisi sunt anim labore consequat officia pariatur laborum ullamco voluptate labore sit. Magna do non enim reprehenderit laborum duis. Nulla voluptate cillum adipisicing. Amet voluptate fugiat et.

1import { Disclosure } from "@sanity/sanity-id/components/disclosure"
2
3export default () => {
4        return (
5          <Disclosure summary="Disclosure with short content" disableAnimations>
6            <p>
7              Occaecat dolor ipsum sint labore deserunt elit nulla duis anim ut
8              sit fugiat eiusmod dolore Lorem. Dolore consectetur cillum commodo
9              sint in velit magna duis nisi nisi fugiat dolor culpa. Veniam
10              nostrud id deserunt nulla sit aliqua nostrud nostrud dolor elit
11              voluptate veniam tempor. Veniam Lorem qui sunt. In laborum ea
12              consequat nisi sunt anim labore consequat officia pariatur laborum
13              ullamco voluptate labore sit. Magna do non enim reprehenderit
14              laborum duis. Nulla voluptate cillum adipisicing. Amet voluptate
15              fugiat et.
16            </p>
17          </Disclosure>
18        )
19      }