Search

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

React Component

Default

Contained

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

Disabled

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"
} %>

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

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`