Expandable content groups with support for rich text, slots, and hydration-sensitive interactive variants.
Available components
Uncontrolled
Lorem ipsum dolor sit amet consectetur. Eros cursus ac sed nullam mi dui pulvinar aenean.
Nulla non vitae integer massa elementum tempus risus nam vestibulum. Ac facilisis lacus blandit amet mauris consequat fermentum. Viverra pretium enim laoreet ultrices odio interdum.
Viverra pretium enim laoreet ultrices odio interdum.
Uncontrolled (dark)
Lorem ipsum dolor sit amet consectetur. Eros cursus ac sed nullam mi dui pulvinar aenean.
Nulla non vitae integer massa elementum tempus risus nam vestibulum. Ac facilisis lacus blandit amet mauris consequat fermentum. Viverra pretium enim laoreet ultrices odio interdum.
Viverra pretium enim laoreet ultrices odio interdum.
Controlled
Close all
Open 1st
Open 2nd
Open 3rd
Lorem ipsum dolor sit amet consectetur. Eros cursus ac sed nullam mi dui pulvinar aenean.
Nulla non vitae integer massa elementum tempus risus nam vestibulum. Ac facilisis lacus blandit amet mauris consequat fermentum. Viverra pretium enim laoreet ultrices odio interdum.
Viverra pretium enim laoreet ultrices odio interdum.
Controlled (dark)
Close all
Open 1st
Open 2nd
Open 3rd
Lorem ipsum dolor sit amet consectetur. Eros cursus ac sed nullam mi dui pulvinar aenean.
Nulla non vitae integer massa elementum tempus risus nam vestibulum. Ac facilisis lacus blandit amet mauris consequat fermentum. Viverra pretium enim laoreet ultrices odio interdum.
Viverra pretium enim laoreet ultrices odio interdum.
Single select
Lorem ipsum dolor sit amet consectetur. Eros cursus ac sed nullam mi dui pulvinar aenean.
Nulla non vitae integer massa elementum tempus risus nam vestibulum. Ac facilisis lacus blandit amet mauris consequat fermentum. Viverra pretium enim laoreet ultrices odio interdum.
Viverra pretium enim laoreet ultrices odio interdum.
Single select (dark)
Lorem ipsum dolor sit amet consectetur. Eros cursus ac sed nullam mi dui pulvinar aenean.
Nulla non vitae integer massa elementum tempus risus nam vestibulum. Ac facilisis lacus blandit amet mauris consequat fermentum. Viverra pretium enim laoreet ultrices odio interdum.
Viverra pretium enim laoreet ultrices odio interdum.
Controlled single select
Open 1st
Open 2nd
Open 3rd
Lorem ipsum dolor sit amet consectetur. Eros cursus ac sed nullam mi dui pulvinar aenean.
Nulla non vitae integer massa elementum tempus risus nam vestibulum. Ac facilisis lacus blandit amet mauris consequat fermentum. Viverra pretium enim laoreet ultrices odio interdum.
Viverra pretium enim laoreet ultrices odio interdum.
Controlled single select (dark)
Open 1st
Open 2nd
Open 3rd
Lorem ipsum dolor sit amet consectetur. Eros cursus ac sed nullam mi dui pulvinar aenean.
Nulla non vitae integer massa elementum tempus risus nam vestibulum. Ac facilisis lacus blandit amet mauris consequat fermentum. Viverra pretium enim laoreet ultrices odio interdum.
Viverra pretium enim laoreet ultrices odio interdum.
Rich text content
Rich text content (dark)
Mixed slot content
Mixed slot content (dark)
Normalization edge cases
Invalid single-select initial state: two items start open, and the first one remains open after normalization.
Lorem ipsum dolor sit amet consectetur. Eros cursus ac sed nullam mi dui pulvinar aenean.
Nulla non vitae integer massa elementum tempus risus nam vestibulum. Ac facilisis lacus blandit amet mauris consequat fermentum. Viverra pretium enim laoreet ultrices odio interdum.
Viverra pretium enim laoreet ultrices odio interdum.
Non-collapsible single-select mode skips disabled items and opens the first enabled item.
This item stays disabled and closed.
Lorem ipsum dolor sit amet consectetur. Eros cursus ac sed nullam mi dui pulvinar aenean.
Nulla non vitae integer massa elementum tempus risus nam vestibulum. Ac facilisis lacus blandit amet mauris consequat fermentum. Viverra pretium enim laoreet ultrices odio interdum.
Normalization edge cases (dark)
Invalid single-select initial state: two items start open, and the first one remains open after normalization.
Lorem ipsum dolor sit amet consectetur. Eros cursus ac sed nullam mi dui pulvinar aenean.
Nulla non vitae integer massa elementum tempus risus nam vestibulum. Ac facilisis lacus blandit amet mauris consequat fermentum. Viverra pretium enim laoreet ultrices odio interdum.
Viverra pretium enim laoreet ultrices odio interdum.
Non-collapsible single-select mode skips disabled items and opens the first enabled item.
This item stays disabled and closed.
Lorem ipsum dolor sit amet consectetur. Eros cursus ac sed nullam mi dui pulvinar aenean.
Nulla non vitae integer massa elementum tempus risus nam vestibulum. Ac facilisis lacus blandit amet mauris consequat fermentum. Viverra pretium enim laoreet ultrices odio interdum.