Search

A self-contained search form that can be used in isolation and inside of menus.

Default

Contained

Hidden label (label is visually hidden, but still accessible to screenreaders)

Sage Component

SageSearch

<h3 class="t-sage-heading-6">Default</h3>
<%= sage_component SageSearch, {
  id: "search-1",
  placeholder: "Search Products",
  value: nil,
  label_text: "Search"
} %>

<h3 class="t-sage-heading-6">Contained</h3>
<%= sage_component SageSearch, {
  id: "search-2",
  placeholder: "Search Products",
  value: nil,
  contained: true,
  label_text: "Search"
} %>

<h3 class="t-sage-heading-6">Hidden label (label is visually hidden, but still accessible to screenreaders)</h3>
<%= sage_component SageSearch, {
  id: "search-3",
  placeholder: "Search Coupons",
  value: nil,
  contained: true,
  hide_label: true,
  label_text: "Search"
} %>

Property	Description	Type	Default
`contained`	Set to `true` when in the context of a "search toolbar" area.	Boolean	`false`
`hide_label`	When set to `true`, hides the Search input's label	Boolean	`false`
`id` required	A unique identifier for this component, used to associate with the label.	String	`nil`
`label_text` required	Text to display as a label/caption above the search field.	String	`nil`
`placeholder`	Text displayed within the search field when empty.	String	`nil`
`value`	Allows setting a predefined value of the search input.	String	`nil`