Heartwood

Search: With Value 

<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" />
        <button class="btn text-input__clear-btn  btn-icon-only " type="button">
					<span class="btn__inner">
						<span class="btn__icon-wrapper">
							<?xml version="1.0" encoding="utf-8"?>
							<svg
								class='btn__icon '
								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="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/><path d="M0 0h24v24H0z" fill="none"/>
							</svg>
						</span>
						
					</span>	
			</button>
    </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",
  "iconAfter": "<path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/>"
}

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