<h1>Input Field</h1>
<div id="inputs" class="grid grid-cols-4 gap-6">
  <input-field label="Input" placeholder="Placeholder" v-model="testValue"></input-field>
  <input-field label="Input with left icon" placeholder="Placeholder" left-icon="sn-icon-<%= icons_list.sample %>"></input-field>
  <input-field label="Input with right icon" placeholder="Placeholder" right-icon="sn-icon-<%= icons_list.sample %>"></input-field>
  <input-field label="Input with both icon" placeholder="Placeholder" left-icon="sn-icon-<%= icons_list.sample %>" right-icon="sn-icon-<%= icons_list.sample %>"></input-field>
  <input-field :required="true" label="Input with required" placeholder="Placeholder"></input-field>
  <input-field label="Input with sub-label" sub-label="Test sub-label" placeholder="Placeholder"></input-field>
  <input-field label="Input with help menu" help-description="Test help description<br><br><b>Support HTML</b>" placeholder="Placeholder"></input-field>
  <input-field :disabled="true" label="Disabled Input" placeholder="Placeholder"></input-field>
  <input-field :error="true" label="Input with error" placeholder="Placeholder"></input-field>
  <input-field :error="true" label="Input with error message" error-message="Test error message"></input-field>
  <input-field :error="true" label="Input with long error message" error-message="Test error message Test error message Test error message Test error message Test error message Test error message Test error message Test error message"></input-field>
</div>

<%= javascript_include_tag 'vue_design_system_inputs' %>
