Feedback@knitui/components
Spoiler
Spoiler collapses content taller than maxHeight and renders a toggle control to reveal or hide the overflow. Supports both controlled (expanded) and uncontrolled (defaultExpanded) usage.
import { Spoiler } from "@knitui/components";Playground
Loading playground…
<Spoiler
showLabel="Show more"
hideLabel="Hide"
maxHeight={80}
defaultExpanded={false}
transitionDuration={200}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Spoiler>Examples
No Overflow
Content that is shorter than maxHeight — the toggle is never rendered.
Loading example…
With Overflow
Content that overflows and reveals the toggle control.
Loading example…
Default Expanded
Starts fully expanded via defaultExpanded.
Loading example…
Shadows
Elevation shadow ladder applied via the inherited shadow prop.
Loading example…
Controlled
Controlled expanded state wired to external React state.
Loading example…
No Animation
Animation disabled — the region snaps to its target height instantly.
Loading example…
Custom Labels
Custom show/hide labels with emoji to illustrate arbitrary ReactNode labels.
Loading example…
Multiple Instances
Multiple independent Spoilers side by side, each with a different maxHeight.
Loading example…
Styles
Per-slot styles targets individual parts — here the region and control.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
hideLabel required | ReactNode | Hide | Label on the control while the content is expanded. |
showLabel required | ReactNode | Show more | Label on the control while the content is collapsed. |
children | ReactNode | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | |
controlRef | Ref<TamaguiElement> | undefined | — | Ref of the toggle control element. |
defaultExpanded | boolean | undefined | false | Initial expanded state (uncontrolled). |
disabled system | boolean | undefined | — | |
expanded | boolean | undefined | — | Controlled expanded state. |
hideAriaLabel | string | undefined | — | Accessible label for the toggle when expanded (falls back to `hideLabel`). |
maxHeight | number | undefined | 100 | Maximum height (px) of the collapsed region. The toggle appears only when the content exceeds this value. |
onExpandedChange | ((expanded: boolean) => void) | undefined | — | Called when the expanded state is toggled by the user. |
shadow system | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefined | — | |
showAriaLabel | string | undefined | — | Accessible label for the toggle when collapsed (falls back to `showLabel`). |
styles system | SlotStyles<SpoilerStyles> | undefined | — | Uniform per-slot style passthrough — sugar over the composable parts. Slots: `root` / `region` / `control` / `fade`. Explicit inline props win. |
theme system | ThemeName | null | undefined | — | Applies a theme to this element |
transitionDuration | number | undefined | 200 | Height-animation duration in ms. Set to 0 to disable the animation entirely. |
Style slots
Every part of Spoiler can be styled through the styles prop. Explicit props on the component always win over slot styles.
| Slot | Usage |
|---|---|
control | styles={{ control: { … } }} |
fade | styles={{ fade: { … } }} |
region | styles={{ region: { … } }} |
root | styles={{ root: { … } }} |
Accessibility & DOM props (2)
| Prop | Type |
|---|---|
key | Key | null | undefined |
ref | Ref<TamaguiElement> | undefined |
Plus 496 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.