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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <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 ">
            <input class="f-base" type="text" value="prefilled value">
                </span>
  </div>

With icon

With icon

        {% include "@Components/forms/input-field/input-field.twig" with { props: {
    label: "With icon",
    placeholder: "Jmeno a prijmeni",
    icon: {
        src: 'images/svg/user.svg',
    }
} } %}

          <div class="f-wrap ">
            <label class="f-label">
  <span class="f-label__title">With icon</span>
</label>
        <span class="f-input__wrapper --with-icon">
            <input class="f-base" type="text" placeholder="Jmeno a prijmeni">
                    <span class="input__icon">
          <span class="icon">
      <img src="images/svg/user.svg"  loading="lazy">
  
  </span>
        </span>
          </span>
  </div>

Datepicker

Date

        {% include "@Components/forms/input-field/input-field.twig" with { props: {
    label: "Date",
    type: 'date',
    icon: {
        src: 'images/svg/calendar-home.svg',
    }
} } %}

          <div class="f-wrap ">
            <label class="f-label">
  <span class="f-label__title">Date</span>
</label>
        <span class="f-input__wrapper --with-icon">
            <input class="f-base   --datepicker" type="text">
                    <span class="input__icon">
          <span class="icon">
      <img src="images/svg/calendar-home.svg"  loading="lazy">
  
  </span>
        </span>
          </span>
  </div>

Schema

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