Heartwood

Search: Readonly 

<div class="text-input ">
    <div class="text-input__inner">
        <?xml version="1.0" encoding="utf-8"?>
        <svg class='text-input__icon-pre' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
		<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/>
		</svg>
        <input type="" class="text-input__input" placeholder="Search teammates…" value="barber services" readonly />
    </div>
</div>
 
<div class="text-input {{class}}">
	{{> @input-inner}}
</div>
 
{
  "placeholder": "Search teammates…",
  "iconBefore": "<path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/>",
  "search": true,
  "value": "barber services",
  "readonly": true
}

Search

A Search input may be used to trigger a search based on user input.

When to use:

Use the Search input to allow a user’s search query to update the entire view.

When not to use:

  • To show search results in close proximity to the input or to capture input from a set group of options; instead use an Autosuggest