Studio
2

Show More

Installation

pnpm dlx @mielui/svelte add show-more

Usage

Use the default clipped view for text. For links, forms, or other interactive content, supply a separate preview snippet: the full children remain mounted but hidden and inert while collapsed. The trigger snippet can replace the default button; forward its props to a native button or Button. Omitting trigger keeps the built-in control.

Without a preview snippet, the disclosure is shown only when content exceeds lines . Bind expanded when another control needs to coordinate the state.

import { ShowMore } from '$lib/mielui/components/show-more';

let expanded = $state(false);

<ShowMore bind:expanded lines={3} maxHeight={320} label="Release notes">
  <p>{releaseNotes}</p>
</ShowMore>

Examples

Interactive details

Preview, full content, and trigger are separate snippet slots. This example replaces the control without rendering the default chevron. If controlled state collapses the details while focus is inside, focus returns to the trigger.

Capped content

When expanded content exceeds maxHeight , it becomes a keyboard-focusable scroll region.

Choose a text or interactive preview

Use a line-limited preview for prose. When hidden content includes links or buttons, supply a separate preview snippet and keep those controls in the expanded content. The interactive example prevents a clipped control from becoming an invisible keyboard stop.

API reference

ShowMore

Clamps long content and expands it on demand.

Prop Type Default
lines number | undefined

Number of visible text lines while collapsed.

 3
maxHeight number | undefined

Maximum expanded height before the content becomes scrollable.

 320
defaultExpanded boolean | undefined

Initial expanded state when `expanded` is not bound.

 false
expanded Bindable boolean | undefined

Bindable disclosure state.

 defaultExpanded
moreLabel string | undefined 'Show more'
lessLabel string | undefined 'Show less'
label string | undefined

Accessible name for the expanded scroll region when the content is capped.

 'Details'
onExpandedChange ((expanded: boolean) => void) | undefined —
children Snippet<[]> | undefined

Full content. With preview, this subtree is hidden and inert while collapsed.

 —
preview Snippet<[]> | undefined

Separate collapsed content for disclosures containing interactive controls.

 —
trigger Snippet<[{ expanded: boolean; props: Pick<HTMLButtonAttributes, "id" | "aria-controls" | "aria-expanded" | "onclick" | "type">; }]> | undefined

Custom control. Forward props to its native button to preserve disclosure semantics.

 —
class string | undefined —