x
<div class="">
<div class="Polaris-Labelled__LabelWrapper">
<div class="Polaris-Label">
<label class="Polaris-Label__Text" for="url">URL</label>
</div>
</div>
<div class="Polaris-Connected">
<div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
<div data-polaris-text-field-has-value-class="Polaris-TextField--hasValue" data-polaris-text-field-clear-button-hidden-class="Polaris-TextField__Hidden" data-controller="polaris-text-field" class="Polaris-TextField">
<div class="Polaris-TextField__Prefix">
https://shopify.com/
</div>
<input type="url" name="url" id="url" data-polaris-text-field-target="input" data-action="polaris-text-field#syncValue" class="Polaris-TextField__Input" />
<div class="Polaris-TextField__Backdrop"></div>
</div>
</div>
</div>
</div>
<br>
<div class="">
<div class="Polaris-Labelled__LabelWrapper">
<div class="Polaris-Label">
<label class="Polaris-Label__Text" for="shop_domain">Shop address</label>
</div>
</div>
<div class="Polaris-Connected">
<div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
<div data-polaris-text-field-has-value-class="Polaris-TextField--hasValue" data-polaris-text-field-clear-button-hidden-class="Polaris-TextField__Hidden" data-controller="polaris-text-field" class="Polaris-TextField">
<input type="text" name="shop_domain" id="shop_domain" data-polaris-text-field-target="input" data-action="polaris-text-field#syncValue" class="Polaris-TextField__Input Polaris-TextField__Input--suffixed" />
<div class="Polaris-TextField__Suffix">
.myshopify.com
</div>
<div class="Polaris-TextField__Backdrop"></div>
</div>
</div>
</div>
</div>
<br>
<div class="">
<div class="Polaris-Labelled__LabelWrapper">
<div class="Polaris-Label">
<label class="Polaris-Label__Text" for="price">Price</label>
</div>
</div>
<div class="Polaris-Connected">
<div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
<div data-polaris-text-field-has-value-class="Polaris-TextField--hasValue" data-polaris-text-field-clear-button-hidden-class="Polaris-TextField__Hidden" data-controller="polaris-text-field" class="Polaris-TextField Polaris-TextField--hasValue">
<div class="Polaris-TextField__Prefix">
$
</div>
<input type="number" name="price" id="price" value="2" data-polaris-text-field-target="input" data-action="polaris-text-field#syncValue" step="1" min="0" max="1000000" class="Polaris-TextField__Input" />
<div class="Polaris-TextField__Spinner" aria-hidden="true">
<div
role="button"
class="Polaris-TextField__Segment"
tabindex="-1"
data-action="click->polaris-text-field#increase"
>
<div class="Polaris-TextField__SpinnerIcon">
<span class="Polaris-Icon">
<svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path d="M15 12l-5-5-5 5h10z"></path>
</svg>
</span> </div>
</div>
<div
role="button"
class="Polaris-TextField__Segment"
tabindex="-1"
data-action="click->polaris-text-field#decrease"
>
<div class="Polaris-TextField__SpinnerIcon">
<span class="Polaris-Icon">
<svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
<path d="M5 8l5 5 5-5H5z"></path>
</svg>
</span> </div>
</div>
</div>
<div class="Polaris-TextField__Backdrop"></div>
</div>
</div>
</div>
</div>
<br>
<div class="">
<div class="Polaris-Labelled__LabelWrapper">
<div class="Polaris-Label">
<label class="Polaris-Label__Text" for="field">Field</label>
</div>
</div>
<div class="Polaris-Connected">
<div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
<div data-polaris-text-field-has-value-class="Polaris-TextField--hasValue" data-polaris-text-field-clear-button-hidden-class="Polaris-TextField__Hidden" data-controller="polaris-text-field" class="Polaris-TextField">
<div class="Polaris-TextField__Prefix">
<span class="Polaris-Icon">
<svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path fill-rule="evenodd" d="M4.5 0h11A1.5 1.5 0 0 1 17 1.5v18.223a.2.2 0 0 1-.335.148l-1.662-1.513a.5.5 0 0 0-.673 0l-1.66 1.51a.5.5 0 0 1-.673 0l-1.66-1.51a.5.5 0 0 0-.674 0l-1.66 1.51a.5.5 0 0 1-.673 0l-1.66-1.51a.5.5 0 0 0-.673 0L3.335 19.87A.2.2 0 0 1 3 19.723V1.5A1.5 1.5 0 0 1 4.5 0zm4.207 11.293c.667.667 1.29.706 1.316.707.528 0 .977-.448.977-1 0-.646-.128-.751-1.243-1.03h-.001C8.725 9.712 7 9.28 7 7a2.993 2.993 0 0 1 2-2.815V4a1 1 0 0 1 2 0v.2a4.51 4.51 0 0 1 1.707 1.093 1 1 0 0 1-1.414 1.414c-.667-.667-1.291-.706-1.317-.707C9.448 6 9 6.448 9 7c0 .646.127.751 1.242 1.03h.002C11.274 8.288 13 8.72 13 11a2.995 2.995 0 0 1-2 2.815V14a1 1 0 0 1-2 0v-.2a4.49 4.49 0 0 1-1.707-1.093 1 1 0 1 1 1.414-1.414z"></path></svg>
</span>
</div>
<input type="text" name="field" id="field" placeholder="Text field" data-polaris-text-field-target="input" data-action="polaris-text-field#syncValue" class="Polaris-TextField__Input" />
<div class="Polaris-TextField__Suffix">
<span class="Polaris-Icon">
<svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path d="M0 5.324V15.5A1.5 1.5 0 0 0 1.5 17h17a1.5 1.5 0 0 0 1.5-1.5V5.324l-9.496 5.54a1 1 0 0 1-1.008 0L0 5.324z"></path><path d="M19.443 3.334A1.494 1.494 0 0 0 18.5 3h-17a1.49 1.49 0 0 0-.943.334L10 8.842l9.443-5.508z"></path></svg>
</span>
</div>
<div class="Polaris-TextField__Backdrop"></div>
</div>
</div>
</div>
</div>
<br>
<div class="">
<div class="Polaris-Labelled__LabelWrapper">
<div class="Polaris-Label">
<label class="Polaris-Label__Text" for="field">Field</label>
</div>
</div>
<div class="Polaris-Connected">
<div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
<div data-polaris-text-field-has-value-class="Polaris-TextField--hasValue" data-polaris-text-field-clear-button-hidden-class="Polaris-TextField__Hidden" data-controller="polaris-text-field" class="Polaris-TextField">
<div class="Polaris-TextField__Prefix">
<span class="Polaris-Icon">
<svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path fill-rule="evenodd" d="M4.5 0h11A1.5 1.5 0 0 1 17 1.5v18.223a.2.2 0 0 1-.335.148l-1.662-1.513a.5.5 0 0 0-.673 0l-1.66 1.51a.5.5 0 0 1-.673 0l-1.66-1.51a.5.5 0 0 0-.674 0l-1.66 1.51a.5.5 0 0 1-.673 0l-1.66-1.51a.5.5 0 0 0-.673 0L3.335 19.87A.2.2 0 0 1 3 19.723V1.5A1.5 1.5 0 0 1 4.5 0zm4.207 11.293c.667.667 1.29.706 1.316.707.528 0 .977-.448.977-1 0-.646-.128-.751-1.243-1.03h-.001C8.725 9.712 7 9.28 7 7a2.993 2.993 0 0 1 2-2.815V4a1 1 0 0 1 2 0v.2a4.51 4.51 0 0 1 1.707 1.093 1 1 0 0 1-1.414 1.414c-.667-.667-1.291-.706-1.317-.707C9.448 6 9 6.448 9 7c0 .646.127.751 1.242 1.03h.002C11.274 8.288 13 8.72 13 11a2.995 2.995 0 0 1-2 2.815V14a1 1 0 0 1-2 0v-.2a4.49 4.49 0 0 1-1.707-1.093 1 1 0 1 1 1.414-1.414z"></path></svg>
</span>
</div>
<input type="text" name="field" id="field" placeholder="Text field" data-polaris-text-field-target="input" data-action="polaris-text-field#syncValue" class="Polaris-TextField__Input" />
<div class="Polaris-TextField__Suffix">
<span class="Polaris-Icon">
<svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true"><path d="M0 5.324V15.5A1.5 1.5 0 0 0 1.5 17h17a1.5 1.5 0 0 0 1.5-1.5V5.324l-9.496 5.54a1 1 0 0 1-1.008 0L0 5.324z"></path><path d="M19.443 3.334A1.494 1.494 0 0 0 18.5 3h-17a1.49 1.49 0 0 0-.943.334L10 8.842l9.443-5.508z"></path></svg>
</span>
</div>
<div class="Polaris-TextField__Backdrop"></div>
</div>
</div>
</div>
</div>
<%= polaris_text_field(
name: :url,
type: :url,
label: "URL",
prefix: "https://shopify.com/",
) %>
<br>
<%= polaris_text_field(
name: :shop_domain,
label: "Shop address",
suffix: ".myshopify.com",
) %>
<br>
<%= polaris_text_field(
name: :price,
value: "2",
type: :number,
prefix: "$",
) %>
<br>
<%= polaris_text_field(name: :field, placeholder: "Text field") do |c| %>
<% c.prefix(icon: "BillingStatementDollarMajor") %>
<% c.suffix(icon: "EmailMajor") %>
<% end %>
<br>
<%= polaris_text_field(name: :field, placeholder: "Text field") do |c| %>
<% c.prefix do %>
<%= polaris_icon(name: "BillingStatementDollarMajor") %>
<% end %>
<% c.suffix do %>
<%= polaris_icon(name: "EmailMajor") %>
<% end %>
<% end %>
No notes provided.
No params configured.