actions

Disclosure

Interactive element to control the visiblity of content.

Features

Keyboard accessible
Customizable icon position
Multiple sizes
Themes ready

Links

Open in playground Open in Storybook View source ARIA authoring

Click to expand

Cow ricotta hard cheese. Port-salut dolcelatte pecorino who moved my cheese cheddar feta mozzarella camembert de normandie. Fondue fondue cheese triangles cauliflower cheese lancashire edam croque monsieur blue castello. Pecorino danish fontina ricotta cheddar emmental pepper jack.

Anatomy

import { Disclosure } from "@wonderflow/react-components";

export default () => {
  return <Disclosure summary="Click to expand">...</Disclosure>;
};

tsx

API Reference

PROPERTY

TYPE

DEFAULT

open

boolean

false

summary*

ReactNode

padding

boolean

true

contentMaxHeight

string

dimension

enum

"regular"

iconPosition

enum

"left"

expandable

boolean

true

onToggle

function

Accessibility

Adheres to the disclosure role requirements.

Name	Description
`tab`	Move focus on the summary element or outside
`enter`	Expand or collapse the content