Input

Default type text 

  •         {% include "@Components/forms/input-field/input-field.twig" with {props: {
  label: "First Name",
}} %}

      
  •           <div class="f-wrap">
      <input class="f-base base-text" type="text">
          <label class="f-label">
  <span class="f-label__title">First Name</span>
</label>
    
      </div>

Phone 

  •         {% include "@Components/forms/input-field/input-field.twig" with {props: {
  label: "Phone type",
  type: "tel",
}} %}

      
  •           <div class="f-wrap">
      <input class="f-base base-text" type="tel">
          <label class="f-label">
  <span class="f-label__title">Phone type</span>
</label>
    
      </div>

Password 

  •         {% include "@Components/forms/input-field/input-field.twig" with {props: {
  label: "Password type",
  type: "password",
}} %}

      
  •           <div class="f-wrap">
      <input class="f-base base-text" type="password">
          <label class="f-label">
  <span class="f-label__title">Password type</span>
</label>
    
      </div>

Email 

  •         {% include "@Components/forms/input-field/input-field.twig" with {props: {
  label: "Email type",
  type: "email",
}} %}

      
  •           <div class="f-wrap">
      <input class="f-base base-text" type="email">
          <label class="f-label">
  <span class="f-label__title">Email type</span>
</label>
    
      </div>

Url 

  •         {% include "@Components/forms/input-field/input-field.twig" with {props: {
  label: "Url type",
  type: "url",
}} %}

      
  •           <div class="f-wrap">
      <input class="f-base base-text" type="url">
          <label class="f-label">
  <span class="f-label__title">Url type</span>
</label>
    
      </div>

Search 

  •         {% include "@Components/forms/input-field/input-field.twig" with {props: {
  label: "Search type",
  type: "search",
}} %}

      
  •           <div class="f-wrap">
      <input class="f-base base-text" type="search">
          <label class="f-label">
  <span class="f-label__title">Search type</span>
</label>
    
      </div>

Required 

  •         {% include "@Components/forms/input-field/input-field.twig" with {props: {
  label: "Required",
  required: true,
}} %}

      
  •           <div class="f-wrap">
      <input class="f-base base-text" type="text">
          <label class="f-label   --required">
  <span class="f-label__title">Required</span>
</label>
    
      </div>

Without label 

  •         {% include "@Components/forms/input-field/input-field.twig" with { props: {
} } %}

      
  •           <div class="f-wrap">
      <input class="f-base base-text" type="text">
    
      </div>

Placeholder 

  •         {% include "@Components/forms/input-field/input-field.twig" with {props: {
  label: "With Placeholder",
  placeholder: "Enter your first name",
}} %}

      
  •           <div class="f-wrap">
      <input class="f-base base-text" type="text" placeholder="Enter your first name">
          <label class="f-label">
  <span class="f-label__title">With Placeholder</span>
</label>
    
      </div>

Value 

  •         {% include "@Components/forms/input-field/input-field.twig" with {props: {
  label: "With value",
  value: "prefilled value",
}} %}

      
  •           <div class="f-wrap">
      <input class="f-base base-text" type="text" value="prefilled value">
          <label class="f-label">
  <span class="f-label__title">With value</span>
</label>
    
      </div>

Schema