Spoiler

Hide long sections of content under a collapsible spoiler with show/hide controls.

Import

import { Spoiler } from '@tidbcloud/uikit'

Basic Usage

import { Spoiler } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Spoiler maxHeight={120} showLabel="Show more" hideLabel="Hide">
      {/* Long content here */}
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
      <p>More content that will be hidden...</p>
    </Spoiler>
  )
}

Controlled

import { useState } from 'react'
import { Spoiler } from '@tidbcloud/uikit'
 
function Demo() {
  const [expanded, setExpanded] = useState(false)
 
  return (
    <Spoiler
      maxHeight={120}
      showLabel="Show more"
      hideLabel="Hide details"
      expanded={expanded}
      onExpandedChange={setExpanded}
    >
      {/* Content */}
    </Spoiler>
  )
}

Transition Duration

Control or disable the expand/collapse animation:

import { Spoiler } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Spoiler
      maxHeight={120}
      showLabel="Show more"
      hideLabel="Hide"
      transitionDuration={0} // Disable animation
    >
      {/* Content */}
    </Spoiler>
  )
}

Key Props

Prop	Type	Description
maxHeight	number	Maximum visible content height before spoiler appears
showLabel	ReactNode	Label for expand action (required)
hideLabel	ReactNode	Label for collapse action (required)
expanded	boolean	Controlled expanded state
onExpandedChange	(expanded: boolean) => void	Called when expanded state changes
transitionDuration	number	Animation duration in ms (0 to disable)
initialState	boolean	Initial expanded state

Space Stack