Collapsible Search

A button that expands into a pill-shaped search form. Accepts all standard button parameters to configure the trigger appearance.

Default / Medium (md)

@collapsibleSearch([ 'button' => [ 'text' => 'Search', 'icon' => ['name' => 'search'], 'style' => 'filled', 'color' => 'default', 'size' => 'md', ], ]) @endcollapsibleSearch

<div class="u-display--flex u-justify-content--end" style="min-height:64px;align-items:center">
  @collapsibleSearch([ 'button' =&gt; [ 'text' =&gt; 'Search', 'icon' =&gt; ['name' =&gt; 'search'], 'style' =&gt; 'filled', 'color' =&gt; 'default', 'size' =&gt; 'md', ], ]) @endcollapsibleSearch
</div>

{{-- Default (collapsed) state. Placed right-aligned to show the
     panel expanding left, as it would in a real header. --}}
<div class="u-display--flex u-justify-content--end" style="min-height:64px;align-items:center">
    @collapsibleSearch([
        'button' => [
            'text'  => 'Search',
            'icon'  => ['name' => 'search'],
            'style' => 'filled',
            'color' => 'default',
            'size'  => 'md',
        ],
    ])
    @endcollapsibleSearch
</div>

Small (sm)

@collapsibleSearch([ 'button' => [ 'text' => 'Search', 'icon' => ['name' => 'search'], 'style' => 'filled', 'color' => 'default', 'size' => 'sm', ], ]) @endcollapsibleSearch

<div class="u-display--flex u-justify-content--end" style="min-height:48px;align-items:center">
  @collapsibleSearch([ 'button' =&gt; [ 'text' =&gt; 'Search', 'icon' =&gt; ['name' =&gt; 'search'], 'style' =&gt; 'filled', 'color' =&gt; 'default', 'size' =&gt; 'sm', ], ]) @endcollapsibleSearch
</div>

{{-- Small size variant --}}
<div class="u-display--flex u-justify-content--end" style="min-height:48px;align-items:center">
    @collapsibleSearch([
        'button' => [
            'text'  => 'Search',
            'icon'  => ['name' => 'search'],
            'style' => 'filled',
            'color' => 'default',
            'size'  => 'sm',
        ],
    ])
    @endcollapsibleSearch
</div>

Large (lg)

@collapsibleSearch([ 'button' => [ 'text' => 'Search', 'icon' => ['name' => 'search'], 'style' => 'filled', 'color' => 'default', 'size' => 'lg', ], ]) @endcollapsibleSearch

<div class="u-display--flex u-justify-content--end" style="min-height:80px;align-items:center">
  @collapsibleSearch([ 'button' =&gt; [ 'text' =&gt; 'Search', 'icon' =&gt; ['name' =&gt; 'search'], 'style' =&gt; 'filled', 'color' =&gt; 'default', 'size' =&gt; 'lg', ], ]) @endcollapsibleSearch
</div>

{{-- Large size variant --}}
<div class="u-display--flex u-justify-content--end" style="min-height:80px;align-items:center">
    @collapsibleSearch([
        'button' => [
            'text'  => 'Search',
            'icon'  => ['name' => 'search'],
            'style' => 'filled',
            'color' => 'default',
            'size'  => 'lg',
        ],
    ])
    @endcollapsibleSearch
</div>

Pre-expanded state

@collapsibleSearch([ 'button' => [ 'text' => 'Search', 'icon' => ['name' => 'search'], 'style' => 'filled', 'color' => 'default', 'size' => 'md', ], 'isExpanded' => true, 'placeholder' => 'Type to search…', ]) @endcollapsibleSearch

<div class="u-display--flex u-justify-content--end" style="min-height:64px;align-items:center">
  @collapsibleSearch([ 'button' =&gt; [ 'text' =&gt; 'Search', 'icon' =&gt; ['name' =&gt; 'search'], 'style' =&gt; 'filled', 'color' =&gt; 'default', 'size' =&gt; 'md', ], 'isExpanded' =&gt; true,
  'placeholder' =&gt; 'Type to search…', ]) @endcollapsibleSearch
</div>

{{-- Pre-expanded state. Right-aligned wrapper shows the panel in context. --}}
<div class="u-display--flex u-justify-content--end" style="min-height:64px;align-items:center">
    @collapsibleSearch([
        'button' => [
            'text'  => 'Search',
            'icon'  => ['name' => 'search'],
            'style' => 'filled',
            'color' => 'default',
            'size'  => 'md',
        ],
        'isExpanded'  => true,
        'placeholder' => 'Type to search…',
    ])
    @endcollapsibleSearch
</div>

Inside a header

@collapsibleSearch([ 'button' => [ 'text' => 'Sök', 'icon' => ['name' => 'search'], 'style' => 'basic', 'color' => 'default', 'size' => 'md', 'ariaLabel' => 'Öppna sökfält', 'reversePositions' => true, ], 'placeholder' => 'Vad letar du efter?', 'action' => '/search', ]) @endcollapsibleSearch

<header class="c-header u-display--flex u-align-items--center u-justify-content--space-between u-gap--4" data-uid="6a8c1adc3dfb2" data-component="header">
  <a class="c-link u-display--flex" href="#" target="_top" data-uid="6a8c1adc3da2c" data-component="link"><!-- logotype.blade.php -->
  <figure class="c-logotype c-header__logotype c-logotype--is-maskable" data-logotype-maskable="true" data-logotype-maskable-src="/assets/img/logotype.svg" style=
  "--c-logotype--mask-image: url(&quot;/assets/img/logotype.svg&quot;);" data-uid="6a8c1adc3d9ac" data-component="logotype">
    <img src="/assets/img/logotype.svg" alt="Logotype" class="c-logotype__image" />
  </figure></a> <!-- nav.blade.php -->
  <ul class="c-nav c-nav--depth-1 unlist c-nav--horizontal" aria-orientation="horizontal" role="menu" data-js-keep-in-viewport-after-resize="1" id="id_6a8c1adc3dabe" data-uid="6a8c1adc3dabe"
  data-component="nav">
    <li id="6a8c1adc3dabe-1-0__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Arbete">
      <div class="c-nav__item-wrapper">
        <a class="c-link c-nav__link" href="#" target="_top" id="id_6a8c1adc3dabe-1-0__label" data-uid="6a8c1adc3dceb" data-component="link"><!-- icon.blade.php -->
         <span class="c-nav__text" style="">Arbete</span></a>
      </div>
    </li>
    <li id="6a8c1adc3dabe-1-1__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Bo, bygga och miljö">
      <div class="c-nav__item-wrapper">
        <a class="c-link c-nav__link" href="#" target="_top" id="id_6a8c1adc3dabe-1-1__label" data-uid="6a8c1adc3dd9a" data-component="link"><!-- icon.blade.php -->
         <span class="c-nav__text" style="">Bo, bygga och miljö</span></a>
      </div>
    </li>
    <li id="6a8c1adc3dabe-1-2__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Förskola och utbildning">
      <div class="c-nav__item-wrapper">
        <a class="c-link c-nav__link" href="#" target="_top" id="id_6a8c1adc3dabe-1-2__label" data-uid="6a8c1adc3de39" data-component="link"><!-- icon.blade.php -->
         <span class="c-nav__text" style="">Förskola och utbildning</span></a>
      </div>
    </li>
    <li id="6a8c1adc3dabe-1-3__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Kommun och politik">
      <div class="c-nav__item-wrapper">
        <a class="c-link c-nav__link" href="#" target="_top" id="id_6a8c1adc3dabe-1-3__label" data-uid="6a8c1adc3dec5" data-component="link"><!-- icon.blade.php -->
         <span class="c-nav__text" style="">Kommun och politik</span></a>
      </div>
    </li>
    <li id="6a8c1adc3dabe-1-4__item" class="c-nav__item c-nav__item--default c-nav__item--depth-1" role="menuitem" data-depth="1" aria-label="Omsorg och stöd">
      <div class="c-nav__item-wrapper">
        <a class="c-link c-nav__link" href="#" target="_top" id="id_6a8c1adc3dabe-1-4__label" data-uid="6a8c1adc3df4d" data-component="link"><!-- icon.blade.php -->
         <span class="c-nav__text" style="">Omsorg och stöd</span></a>
      </div>
    </li>
  </ul>@collapsibleSearch([ 'button' =&gt; [ 'text' =&gt; 'Sök', 'icon' =&gt; ['name' =&gt; 'search'], 'style' =&gt; 'basic', 'color' =&gt; 'default', 'size' =&gt; 'md', 'ariaLabel' =&gt; 'Öppna
  sökfält', 'reversePositions' =&gt; true, ], 'placeholder' =&gt; 'Vad letar du efter?', 'action' =&gt; '/search', ]) @endcollapsibleSearch
</header>

{{-- Collapsible search placed inside a header bar --}}
@header([
    'classList' => [
        'u-display--flex',
        'u-align-items--center',
        'u-justify-content--space-between',
        'u-gap--4',
    ],
])
    @link(['href' => '#', 'classList' => ['u-display--flex']])
        @logotype([
            'src'      => '/assets/img/logotype.svg',
            'alt'      => 'Logotype',
            'maskable' => true,
            'classList' => ['c-header__logotype'],
        ])
        @endlogotype
    @endlink

    @nav([
        'items'     => \MunicipioStyleGuide\Navigation::getMockedTopLevel(),
        'direction' => 'horizontal',
    ])
    @endnav

    @collapsibleSearch([
        'button' => [
            'text'      => 'Sök',
            'icon'      => ['name' => 'search'],
            'style'     => 'basic',
            'color'     => 'default',
            'size'      => 'md',
            'ariaLabel' => 'Öppna sökfält',
            'reversePositions' => true,
        ],
        'placeholder' => 'Vad letar du efter?',
        'action'      => '/search',
    ])
    @endcollapsibleSearch
@endheader

Primary colour trigger

@collapsibleSearch([ 'button' => [ 'text' => 'Search', 'icon' => ['name' => 'search'], 'style' => 'filled', 'color' => 'primary', 'size' => 'md', ], ]) @endcollapsibleSearch

<div class="u-display--flex u-justify-content--end" style="min-height:64px;align-items:center">
  @collapsibleSearch([ 'button' =&gt; [ 'text' =&gt; 'Search', 'icon' =&gt; ['name' =&gt; 'search'], 'style' =&gt; 'filled', 'color' =&gt; 'primary', 'size' =&gt; 'md', ], ]) @endcollapsibleSearch
</div>

{{-- Primary colour trigger. --}}
<div class="u-display--flex u-justify-content--end" style="min-height:64px;align-items:center">
    @collapsibleSearch([
        'button' => [
            'text'  => 'Search',
            'icon'  => ['name' => 'search'],
            'style' => 'filled',
            'color' => 'primary',
            'size'  => 'md',
        ],
    ])
    @endcollapsibleSearch
</div>

API

Parameter	Default	Description
button	[]	Button component configuration array. Accepts all standard button parameters (text, icon, size, color, style, shape, etc.). Merged directly into the trigger button.
placeholder	Search…	Placeholder text inside the search input.
inputName	s	Name attribute for the search input (used in query string).
inputLabel	Search	Accessible label for the search input.
action		Form action URL. Defaults to current page.
method	get	Form submission method; get or post.
closeLabel	Close search	Accessible label for the close button.
isExpanded	false	Render the component in its expanded state on load.
lang	[]	Translatable string overrides.

CSS API

Variable	Default	Type	Values	Description
--c-collapsible-search--base	var(--base)	range	-	Main unit that drives radius and spacing scales.
--c-collapsible-search--border-radius	var(--border-radius)	range	-	Border Radius
--c-collapsible-search--border-width	var(--border-width)	range	-	Size
--c-collapsible-search--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-collapsible-search--color--surface	var(--color--surface)	color	-	Controls the search field background and its readable text contrast.
--c-collapsible-search--color--surface-contrast	var(--color--surface-contrast)	color	-	Used for text and icons on surface backgrounds with less contrast.
--c-collapsible-search--color--surface-contrast-muted	var(--color--surface-contrast-muted)	color	-	Derived muted contrast for text and icons on surface backgrounds.
--c-collapsible-search--color--primary	var(--color--primary)	color	-	Controls the field outline that separates it from the panel.
--c-collapsible-search--color--secondary	var(--color--secondary)	color	-	Controls the surrounding panel and close-button color scheme.
--c-collapsible-search--color--secondary-contrast	var(--color--secondary-contrast)	color	-	Secondary Contrast
--c-collapsible-search--corner-shape	var(--corner-shape)	select	square, round, squircle, circular, bevel, scoop	Corner Shape
--c-collapsible-search--font-size-90	var(--font-size-90)	range	-	One step below base in the type scale.
--c-collapsible-search--font-size-100	var(--font-size-100)	range	-	Base font size.
--c-collapsible-search--font-size-200	var(--font-size-200)	range	-	One step above base in the type scale. Equivalent to h6/subtitle.
--c-collapsible-search--input-min-width-multiplier	20	range	-	Minimum desktop field width, measured in base units.
--c-collapsible-search--input-max-width-multiplier	40	minmaxrange	-	Maximum desktop field width, measured in base units.
--c-collapsible-search--item-size-multiplier	6	range	-	Scales the field and its action buttons together, measured in base units.
--c-collapsible-search--padding-inline-multiplier	2	range	-	Adjusts the field's horizontal inset, measured in space units.
--c-collapsible-search--border-width-multiplier	2	range	-	Scales the field border thickness locally while keeping the search action aligned to its edge.
--c-collapsible-search--motion-duration-multiplier	1	range	-	A lower value makes the sequence faster; a higher value makes it more deliberate.

Similar components

Button Field Header