Disclosure
A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.
install | yarn add react-aria-components |
---|---|
version | 1.4.0 |
usage | import {Disclosure} from 'react-aria-components' |
Under construction
Example#
import {Button, UNSTABLE_Disclosure as Disclosure, UNSTABLE_DisclosurePanel as DisclosurePanel} from 'react-aria-components';
<Disclosure>
<h3>
<Button slot="trigger">
<svg viewBox="0 0 24 24">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
System Requirements
</Button>
</h3>
<DisclosurePanel>
<p>Details about system requirements here.</p>
</DisclosurePanel>
</Disclosure>
import {
Button,
UNSTABLE_Disclosure as Disclosure,
UNSTABLE_DisclosurePanel as DisclosurePanel
} from 'react-aria-components';
<Disclosure>
<h3>
<Button slot="trigger">
<svg viewBox="0 0 24 24">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
System Requirements
</Button>
</h3>
<DisclosurePanel>
<p>Details about system requirements here.</p>
</DisclosurePanel>
</Disclosure>
import {
Button,
UNSTABLE_Disclosure
as Disclosure,
UNSTABLE_DisclosurePanel
as DisclosurePanel
} from 'react-aria-components';
<Disclosure>
<h3>
<Button slot="trigger">
<svg viewBox="0 0 24 24">
<path d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
System
Requirements
</Button>
</h3>
<DisclosurePanel>
<p>
Details about
system
requirements
here.
</p>
</DisclosurePanel>
</Disclosure>
Show CSS
.react-aria-Disclosure {
.react-aria-Button[slot=trigger] {
background: none;
border: none;
box-shadow: none;
font-weight: bold;
font-size: 16px;
display: flex;
align-items: center;
gap: 8px;
svg {
rotate: 0deg;
transition: rotate 200ms;
width: 12px;
height: 12px;
fill: none;
stroke: currentColor;
stroke-width: 3px;
}
}
&[data-expanded] .react-aria-Button[slot=trigger] svg {
rotate: 90deg;
}
}
.react-aria-DisclosurePanel {
margin-left: 32px;
}
.react-aria-Disclosure {
.react-aria-Button[slot=trigger] {
background: none;
border: none;
box-shadow: none;
font-weight: bold;
font-size: 16px;
display: flex;
align-items: center;
gap: 8px;
svg {
rotate: 0deg;
transition: rotate 200ms;
width: 12px;
height: 12px;
fill: none;
stroke: currentColor;
stroke-width: 3px;
}
}
&[data-expanded] .react-aria-Button[slot=trigger] svg {
rotate: 90deg;
}
}
.react-aria-DisclosurePanel {
margin-left: 32px;
}
.react-aria-Disclosure {
.react-aria-Button[slot=trigger] {
background: none;
border: none;
box-shadow: none;
font-weight: bold;
font-size: 16px;
display: flex;
align-items: center;
gap: 8px;
svg {
rotate: 0deg;
transition: rotate 200ms;
width: 12px;
height: 12px;
fill: none;
stroke: currentColor;
stroke-width: 3px;
}
}
&[data-expanded] .react-aria-Button[slot=trigger] svg {
rotate: 90deg;
}
}
.react-aria-DisclosurePanel {
margin-left: 32px;
}
Props#
Disclosure#
Name | Type | Description |
children | ReactNode | (
(values: DisclosureRenderProps
& & {}
)) => ReactNode | The children of the component. A function may be provided to alter the children based on component state. |
id | Key | An id for the disclosure when used within a DisclosureGroup, matching the id used in expandedKeys . |
isDisabled | boolean | Whether the disclosure is disabled. |
isExpanded | boolean | Whether the disclosure is expanded (controlled). |
defaultExpanded | boolean | Whether the disclosure is expanded by default (uncontrolled). |
className | string | (
(values: DisclosureRenderProps
& & {}
)) => string | The CSS className for the element. A function may be provided to compute the class based on component state. |
style | CSSProperties | (
(values: DisclosureRenderProps
& & {}
)) => CSSProperties | undefined | The inline style for the element. A function may be provided to compute the style based on component state. |
Events
Name | Type | Description |
onExpandedChange | (
(isExpanded: boolean
)) => void | Handler that is called when the disclosure's expanded state changes. |
Button#
Show props
Name | Type | Default | Description |
form | string | — | The |
formAction | string | — | The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner. |
formEncType | string | — | Indicates how to encode the form data that is submitted. |
formMethod | string | — | Indicates the HTTP method used to submit the form. |
formNoValidate | boolean | — | Indicates that the form is not to be validated when it is submitted. |
formTarget | string | — | Overrides the target attribute of the button's form owner. |
name | string | — | Submitted as a pair with the button's value as part of the form data. |
value | string | — | The value associated with the button's name when it's submitted with the form data. |
isPending | boolean | — | Whether the button is in a pending state. This disables press and hover events while retaining focusability, and announces the pending state to screen readers. |
isDisabled | boolean | — | Whether the button is disabled. |
autoFocus | boolean | — | Whether the element should receive focus on render. |
type | 'button'
| 'submit'
| 'reset' | 'button' | The behavior of the button when used in an HTML form. |
preventFocusOnPress | boolean | — | Whether to prevent focus from moving to the button when pressing it. Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's increment/decrement control. |
children | ReactNode | (
(values: ButtonRenderProps
& & {}
)) => ReactNode | — | The children of the component. A function may be provided to alter the children based on component state. |
className | string | (
(values: ButtonRenderProps
& & {}
)) => string | — | The CSS className for the element. A function may be provided to compute the class based on component state. |
style | CSSProperties | (
(values: ButtonRenderProps
& & {}
)) => CSSProperties | undefined | — | The inline style for the element. A function may be provided to compute the style based on component state. |
Events
Name | Type | Description |
onPress | (
(e: PressEvent
)) => void | Handler that is called when the press is released over the target. |
onPressStart | (
(e: PressEvent
)) => void | Handler that is called when a press interaction starts. |
onPressEnd | (
(e: PressEvent
)) => void | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
onPressChange | (
(isPressed: boolean
)) => void | Handler that is called when the press state changes. |
onPressUp | (
(e: PressEvent
)) => void | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
onFocus | (
(e: FocusEvent<Target>
)) => void | Handler that is called when the element receives focus. |
onBlur | (
(e: FocusEvent<Target>
)) => void | Handler that is called when the element loses focus. |
onFocusChange | (
(isFocused: boolean
)) => void | Handler that is called when the element's focus status changes. |
onKeyDown | (
(e: KeyboardEvent
)) => void | Handler that is called when a key is pressed. |
onKeyUp | (
(e: KeyboardEvent
)) => void | Handler that is called when a key is released. |
onHoverStart | (
(e: HoverEvent
)) => void | Handler that is called when a hover interaction starts. |
onHoverEnd | (
(e: HoverEvent
)) => void | Handler that is called when a hover interaction ends. |
onHoverChange | (
(isHovering: boolean
)) => void | Handler that is called when the hover state changes. |
Layout
Name | Type | Description |
slot | string | null | A slot name for the component. Slots allow the component to receive props from a parent component.
An explicit |
Accessibility
Name | Type | Description |
id | string | The element's unique identifier. See MDN. |
excludeFromTabOrder | boolean | Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available. |
aria-expanded | boolean
| 'true'
| 'false' | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |
aria-haspopup | boolean
| 'menu'
| 'listbox'
| 'tree'
| 'grid'
| 'dialog'
| 'true'
| 'false' | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
aria-controls | string | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
aria-pressed | boolean
| 'true'
| 'false'
| 'mixed' | Indicates the current "pressed" state of toggle buttons. |
aria-label | string | Defines a string value that labels the current element. |
aria-labelledby | string | Identifies the element (or elements) that labels the current element. |
aria-describedby | string | Identifies the element (or elements) that describes the object. |
aria-details | string | Identifies the element (or elements) that provide a detailed, extended description for the object. |
DisclosurePanel#
Show props
Name | Type | Description |
children | ReactNode | The children of the component. |
className | string | (
(values: {}
& & {}
)) => string | The CSS className for the element. A function may be provided to compute the class based on component state. |
style | CSSProperties | (
(values: {}
& & {}
)) => CSSProperties | undefined | The inline style for the element. A function may be provided to compute the style based on component state. |
Accessibility
Name | Type | Default | Description |
role | 'group' | 'region' | 'group' | The accessibility role for the disclosure's panel. |
Styling#
React Aria components can be styled in many ways, including using CSS classes, inline styles, utility classes (e.g. Tailwind), CSS-in-JS (e.g. Styled Components), etc. By default, all components include a builtin className
attribute which can be targeted using CSS selectors. These follow the react-aria-ComponentName
naming convention.
.react-aria-Disclosure {
/* ... */
}
.react-aria-Disclosure {
/* ... */
}
.react-aria-Disclosure {
/* ... */
}
A custom className
can also be specified on any component. This overrides the default className
provided by React Aria with your own.
<Disclosure className="my-disclosure">
{/* ... */}
</Disclosure>
<Disclosure className="my-disclosure">
{/* ... */}
</Disclosure>
<Disclosure className="my-disclosure">
{/* ... */}
</Disclosure>
In addition, some components support multiple UI states (e.g. focused, placeholder, readonly, etc.). React Aria components expose states using data attributes, which you can target in CSS selectors. For example:
.react-aria-Disclosure[data-expanded] {
/* ... */
}
.react-aria-Disclosure[data-expanded] {
/* ... */
}
.react-aria-Disclosure[data-expanded] {
/* ... */
}
The className
and style
props also accept functions which receive states for styling. This lets you dynamically determine the classes or styles to apply, which is useful when using utility CSS libraries like Tailwind.
<Disclosure
className={({ isExpanded }) =>
isExpanded ? 'border-blue-500' : 'border-gray-600'}
/>
<Disclosure
className={({ isExpanded }) =>
isExpanded ? 'border-blue-500' : 'border-gray-600'}
/>
<Disclosure
className={(
{ isExpanded }
) =>
isExpanded
? 'border-blue-500'
: 'border-gray-600'}
/>
The states, selectors, and render props for each component used in a Disclosure
are documented below.
Disclosure#
A Disclosure
can be targeted with the .react-aria-Disclosure
CSS selector, or by overriding with a custom className
. It supports the following states:
Name | CSS Selector | Description |
isExpanded | [data-expanded] | Whether the disclosure is expanded. |
isFocusVisibleWithin | [data-focus-visible-within] | Whether the disclosure has keyboard focus. |
isDisabled | [data-disabled] | Whether the disclosure is disabled. |
state | — | State of the disclosure. |
Button#
A Button
can be targeted with the .react-aria-Button
CSS selector, or by overriding with a custom className
. It supports the following states:
Name | CSS Selector | Description |
isHovered | [data-hovered] | Whether the button is currently hovered with a mouse. |
isPressed | [data-pressed] | Whether the button is currently in a pressed state. |
isFocused | [data-focused] | Whether the button is focused, either via a mouse or keyboard. |
isFocusVisible | [data-focus-visible] | Whether the button is keyboard focused. |
isDisabled | [data-disabled] | Whether the button is disabled. |
isPending | [data-pending] | Whether the button is currently in a pending state. |
DisclosurePanel#
A DisclosurePanel
can be targeted with the .react-aria-DisclosurePanel
CSS selector, or by overriding with a custom className
.