Spoiler | Mantine

Usage

Use Spoiler to hide a long section of content. Set the maxHeight prop to control the point at which content will be hidden under the spoiler and the show/hide control appears. If the content height is less than maxHeight, the spoiler will just render children.

hideLabel and showLabel props are required – they are used as the spoiler toggle button label in the corresponding state.

Deserts cover about one third of the land surface of the Earth. They are defined by low rainfall rather than by heat: some of the largest deserts, such as Antarctica and the Gobi, are cold for most of the year. Sand dunes are the most familiar desert landscape, yet they cover only a small part of desert areas. Most deserts are rocky plains, gravel fields and dry mountain ranges. Plants and animals that live there have adapted to save water: cacti store it in their thick stems, and many animals are active only at night when the air is cooler.

import { Spoiler } from '@mantine/core';

function Demo() {
  return (
    <Spoiler maxHeight={120} showLabel="Show more" hideLabel="Hide">
      {/* Content here */}
    </Spoiler>
  );
}

Control expanded state

To control the expanded state, use expanded and onExpandedChange props. Note that the expanded prop does not have any effect on spoiler visuals if the content height is less than the given maxHeight.

import { useState } from 'react';
import { Spoiler } from '@mantine/core';

function Demo() {
  const [expanded, setExpanded] = useState(false);

  return (
    <Spoiler
      showLabel="Show more"
      hideLabel="Hide details"
      expanded={expanded}
      onExpandedChange={setExpanded}
    >
      {/* Spoiler content */}
    </Spoiler>
  );
}

Subscribe to expanded state changes

Use onExpandedChange to subscribe to expanded state changes:

import { Spoiler } from '@mantine/core';

function Demo() {
  return (
    <Spoiler
      showLabel="Show more"
      hideLabel="Hide details"
      onExpandedChange={(expanded) => console.log(expanded)}
    >
      {/* Spoiler content */}
    </Spoiler>
  );
}

Transition duration

Control the transition duration by setting the transitionDuration prop (transition-duration CSS property in ms). To disable animations, set transitionDuration={0}:

Deserts cover about one third of the land surface of the Earth. They are defined by low rainfall rather than by heat: some of the largest deserts, such as Antarctica and the Gobi, are cold for most of the year. Sand dunes are the most familiar desert landscape, yet they cover only a small part of desert areas. Most deserts are rocky plains, gravel fields and dry mountain ranges. Plants and animals that live there have adapted to save water: cacti store it in their thick stems, and many animals are active only at night when the air is cooler.

import { Spoiler } from '@mantine/core';

function Demo() {
  return (
    <Spoiler maxHeight={120} showLabel="Show more" hideLabel="Hide" transitionDuration={0}>
      {/* Content here */}
    </Spoiler>
  );
}

Get control ref

import { useRef } from 'react';
import { Spoiler } from '@mantine/core';

function Demo() {
  const spoilerControlRef = useRef<HTMLButtonElement>(null);
  return (
    <Spoiler
      controlRef={spoilerControlRef}
      hideLabel="Hide"
      showLabel="Show"
    />
  );
}

Accessibility

The Spoiler component implements proper ARIA attributes for screen reader support:

Toggle button has aria-expanded indicating the expanded/collapsed state
Content region has role="region" and is associated with the button via aria-controls
Keyboard support: Space or Enter key toggles the spoiler when the button is focused

Best practices for label text

Provide descriptive labels for showLabel and hideLabel props that clearly indicate the action:

// Good - clear, descriptive labels
<Spoiler showLabel="Show full article" hideLabel="Hide article" />
<Spoiler showLabel="Expand details" hideLabel="Collapse details" />

// Avoid vague labels
<Spoiler showLabel="More" hideLabel="Less" />
<Spoiler showLabel="..." hideLabel="..." />

Custom accessibility labels

If your button labels don't clearly describe the action for screen reader users, use the showAriaLabel and hideAriaLabel props to provide custom ARIA labels:

import { Spoiler } from '@mantine/core';

function Demo() {
  return (
    <Spoiler
      showLabel="👁️"
      hideLabel="👁️"
      showAriaLabel="Show discussion comments"
      hideAriaLabel="Hide discussion comments"
    >
      {/* Comments content */}
    </Spoiler>
  );
}

RollingNumber

ThemeIcon