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