Input

Default type text

First Name

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

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

</div>

Phone

Phone type

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

          <div class="f-wrap">
      <label class="f-label">
  <span class="f-label__title">Phone type</span>
</label>
    
  <span class="f-input__wrapper position-relative">
        <input class="f-base" type="tel">
      </span>

</div>

Password

Password type

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

          <div class="f-wrap">
      <label class="f-label">
  <span class="f-label__title">Password type</span>
</label>
    
  <span class="f-input__wrapper position-relative">
        <input class="f-base" type="password">
      </span>

</div>

Email

Email type

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

          <div class="f-wrap">
      <label class="f-label">
  <span class="f-label__title">Email type</span>
</label>
    
  <span class="f-input__wrapper position-relative">
        <input class="f-base" type="email">
      </span>

</div>

Url

Url type

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

          <div class="f-wrap">
      <label class="f-label">
  <span class="f-label__title">Url type</span>
</label>
    
  <span class="f-input__wrapper position-relative">
        <input class="f-base" type="url">
      </span>

</div>

Search

Search type

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

          <div class="f-wrap">
      <label class="f-label">
  <span class="f-label__title">Search type</span>
</label>
    
  <span class="f-input__wrapper position-relative">
        <input class="f-base" type="search">
      </span>

</div>

Required

Required

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

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

</div>

Without label

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

          <div class="f-wrap">
    
  <span class="f-input__wrapper position-relative">
        <input class="f-base" type="text">
      </span>

</div>

Placeholder

With Placeholder

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

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

</div>

Value

With value

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

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

</div>

Schema

    {
  "props": {
    "title": {
      "type": "string",
      "description": "Title of the component"
    }
  }
}