mielui
Blocks

Show More

Keeps long content scannable, then reveals the complete detail in place.

Installation

pnpm dlx @mielui/svelte add show-more

Usage

By default the content is clipped to lines lines, 3 by default, and the button appears only when the content is longer. Expanded content taller than maxHeight, 320 by default, scrolls inside a region named by label. Bind expanded when another control needs to coordinate the state.

<script lang="ts">
    import { ShowMore } from '@mielui/svelte/components/show-more';

    let { notes }: { notes: string } = $props();

    let expanded = $state(false);
</script>

<ShowMore bind:expanded lines={3} labels={{ region: 'Release notes' }}>
    <p>{notes}</p>
</ShowMore>

Use the clipped view for prose. When hidden content includes links, forms, or buttons, pass a separate preview snippet: the full children stay mounted but hidden and inert while collapsed, so a clipped control never becomes an invisible keyboard stop. A trigger snippet replaces the default button; forward its props to a native button or Button.

Examples

Interactive details

preview, the full content, and trigger are separate snippets. This example replaces the default control. If controlled state collapses the details while focus is inside, focus returns to the trigger.

Capped content

Expanded content taller than maxHeight becomes a keyboard-focusable scroll region.

Button text

labels.more and labels.less name what is hidden. onExpandedChange runs with the new state each time the content expands or collapses.

State and labels

The content starts collapsed. defaultExpanded starts it open when you are not binding expanded. onExpandedChange runs with the new state each time it expands or collapses.

Pass labels to set the built-in text. labels.more and labels.less are the button text in each state, Show more and Show less by default. Name what is hidden when you can, such as Show all 12 comments. labels.region names the expanded scroll region, Details by default. Every key is optional and English is the fallback.

API reference

ShowMore

Clamps long content and expands it on demand.

  • labels
    ShowMoreLabels

    Overrides the built-in text and accessible names. Every key is optional and English is the fallback.

  • lines
    number

    Number of visible text lines while collapsed.

    Default 3

  • maxHeight
    number

    Maximum expanded height before the content becomes scrollable.

    Default 320

  • defaultExpanded
    boolean

    Initial expanded state when expanded is not bound.

    Default false

  • expanded Bindable
    boolean

    Bindable disclosure state.

    Default defaultExpanded

  • onExpandedChange
    ((expanded: boolean) => void)

    Called with the new state when it expands or collapses.

  • children
    Snippet<[]>

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

  • preview
    Snippet<[]>

    Separate collapsed content for disclosures containing interactive controls.

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

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

  • class
    string

    Classes added to the element.