Input-group examples

Show params

Params

params:
- name: id
  type: string
  required: true
  description: This is used for the main component and to compose id attribute for each item.
- name: namePrefix
  type: string
  required: false
  description: Optional prefix. This is used to prefix each `item.name` using `-`.
- name: items
  type: array
  required: true
  description: An array of input objects with name, value and classes.
  params:
  - name: id
    type: string
    required: false
    description: Item-specific id. If provided, it will be used instead of the generated id.
  - name: type
    type: string
    required: false
    description: Type of input control to render. Defaults to "text".
  - name: inputmode
    type: string
    require: false
    description: Optional value for [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).
  - name: name
    type: string
    required: true
    description: Item-specific name attribute.
  - name: label
    type: object
    required: true
    description: Label text or HTML by specifying value for either text or html keys.
    isComponent: true
  - name: formGroup
    type: object
    required: false
    description: Options for the form-group wrapper
    params:
    - name: classes
      type: string
      required: false
      description: Classes to add to the form group.
  - name: value
    type: string
    required: false
    description: If provided, it will be used as the initial value of the input.
  - name: autocomplete
    type: string
    required: false
    description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "bday-day". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
  - name: pattern
    type: string
    required: false
    description: Attribute to [provide a regular expression pattern](https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute), used to match allowed character combinations for the input value.
  - name: classes
    type: string
    required: false
    description: Classes to add to date input item.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the date input tag.
  - name: isSelect
    type: boolean
    required: false
    description: If true, renders a select instead of an input
  - name: selectItems
    type: array
    required: false
    description: An array of select objects with name, value and classes.
  - name: divider
    type: object
    required: false
    description: Divider item that separates items.
    - name: text
      type: string
      required: true
      description: If `html` is set, this is not required. Text to use within the divider. If `html` is provided, the `text` argument will be ignored.
    - name: html
      type: string
      required: true
      description: If `text` is set, this is not required. HTML to use within the divider. If `html` is provided, the `text` argument will be ignored.
- name: hint
  type: object
  required: false
  description: Options for the hint component.
  isComponent: true
- name: errorMessage
  type: object
  required: false
  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
  isComponent: true
- name: formGroup
  type: object
  required: false
  description: Options for the form-group wrapper
  params:
  - name: classes
    type: string
    required: false
    description: Classes to add to the form group (e.g. to show error state for the whole group) defaults to `flex`.
- name: fieldset
  type: object
  required: false
  description: Options for the fieldset component (e.g. legend).
  isComponent: true
- name: classes
  type: string
  required: false
  description: Classes to add to the date-input container.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the date-input container.

default

Documento de identidad
Show code

Macro

{% from "components/input-group/_macro.input-group.njk" import componentInputGroup %}
{{ componentInputGroup({
  "id": "doc-identidad-1",
  "namePrefix": "doc-identidad",
  "fieldset": {
    "legend": {
      "text": "Documento de identidad"
    }
  },
  "items": [
    {
      "name": "tipo-doc",
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-full lg:w-auto",
      "label": {
        "text": "Tipo"
      },
      "isSelect": true,
      "selectItems": [
        {
          "value": 1,
          "text": "NIF",
          "selected": true
        },
        {
          "value": 2,
          "text": "Pasaporte"
        }
      ]
    },
    {
      "name": "num-doc",
      "classes": "w-full lg:w-64",
      "label": {
        "text": "Número"
      },
      "placeholder": "Ej: 28999876V"
    }
  ]
})  }}

Markup


<!-- input-group -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset role="group">
  <legend class="  font-bold">
    Documento de identidad
  </legend>
    <div class="flex" id="doc-identidad-1">
          <!-- select -->
      <div class="c-form-group mr-base">
        <!-- label -->
        <label class="block" for="doc-identidad-1-tipo-doc">Tipo</label>
        
        <!-- /label -->
        <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-full lg:w-auto" id="doc-identidad-1-tipo-doc" name="doc-identidad-tipo-doc">
              <option value="1" selected>NIF</option>
              <option value="2">Pasaporte</option>
        </select>
      </div>
      <!-- /select -->
        <!-- input -->
      <div class="c-form-group">
        <!-- label -->
        <label class="block" for="doc-identidad-1-num-doc">Número</label>
        
        <!-- /label -->
        <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-full lg:w-64" id="doc-identidad-1-num-doc" name="doc-identidad-num-doc" type="text" placeholder="Ej: 28999876V">
      </div>
      <!-- /input -->
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /input-group -->

with hint

Documento de identidad

Selecciona tu tipo de documento e introduce el número de documento sin espacios

Show code

Macro

{% from "components/input-group/_macro.input-group.njk" import componentInputGroup %}
{{ componentInputGroup({
  "id": "doc-identidad-2",
  "namePrefix": "doc-identidad",
  "fieldset": {
    "legend": {
      "text": "Documento de identidad"
    }
  },
  "hint": {
    "text": "Selecciona tu tipo de documento e introduce el número de documento sin espacios"
  },
  "items": [
    {
      "name": "tipo-doc",
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-full lg:w-auto",
      "label": {
        "text": "Tipo"
      },
      "isSelect": true,
      "selectItems": [
        {
          "value": 1,
          "text": "NIF",
          "selected": true
        },
        {
          "value": 2,
          "text": "Pasaporte"
        }
      ]
    },
    {
      "name": "num-doc",
      "classes": "w-full lg:w-64",
      "label": {
        "text": "Número"
      },
      "placeholder": "Ej: 28999876V"
    }
  ]
})  }}

Markup


<!-- input-group -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset role="group" aria-describedby="doc-identidad-2-hint">
  <legend class="  font-bold">
    Documento de identidad
  </legend>
    <!-- hint -->
  <p id="doc-identidad-2-hint" class="block text-neutral-dark">
    Selecciona tu tipo de documento e introduce el número de documento sin espacios
  </p>
  <!-- /hint -->
  <div class="flex" id="doc-identidad-2">
          <!-- select -->
      <div class="c-form-group mr-base">
        <!-- label -->
        <label class="block" for="doc-identidad-2-tipo-doc">Tipo</label>
        
        <!-- /label -->
        <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-full lg:w-auto" id="doc-identidad-2-tipo-doc" name="doc-identidad-tipo-doc">
              <option value="1" selected>NIF</option>
              <option value="2">Pasaporte</option>
        </select>
      </div>
      <!-- /select -->
        <!-- input -->
      <div class="c-form-group">
        <!-- label -->
        <label class="block" for="doc-identidad-2-num-doc">Número</label>
        
        <!-- /label -->
        <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-full lg:w-64" id="doc-identidad-2-num-doc" name="doc-identidad-num-doc" type="text" placeholder="Ej: 28999876V">
      </div>
      <!-- /input -->
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /input-group -->

with divider

Introduce cantidad
Show code

Macro

{% from "components/input-group/_macro.input-group.njk" import componentInputGroup %}
{{ componentInputGroup({
  "id": "with-divider",
  "namePrefix": "with-divider",
  "fieldset": {
    "legend": {
      "text": "Introduce cantidad"
    }
  },
  "items": [
    {
      "divider": {
        "text": "Desde:",
        "classes": "self-end mb-xl mr-base"
      }
    },
    {
      "name": "num-doc-A",
      "classes": "w-full lg:w-64",
      "label": {
        "text": "Cantidad inicio",
        "classes": "sr-only"
      },
      "placeholder": "Ej: 0"
    },
    {
      "divider": {
        "text": "hasta:",
        "classes": "self-end mb-xl mx-base"
      }
    },
    {
      "name": "num-doc-B",
      "classes": "w-full lg:w-64",
      "label": {
        "text": "Cantidad final",
        "classes": "sr-only"
      },
      "placeholder": "Ej: 600"
    }
  ]
})  }}

Markup


<!-- input-group -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset role="group">
  <legend class="  font-bold">
    Introduce cantidad
  </legend>
    <div class="flex" id="with-divider">
        <div class="self-end mb-xl mr-base" role="separator">
            <p>
              Desde:
            </p>
        </div>
        <!-- input -->
      <div class="c-form-group">
        <!-- label -->
        <label class="block sr-only" for="with-divider-num-doc-A">Cantidad inicio</label>
        
        <!-- /label -->
        <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-full lg:w-64" id="with-divider-num-doc-A" name="with-divider-num-doc-A" type="text" placeholder="Ej: 0">
      </div>
      <!-- /input -->
        <div class="self-end mb-xl mx-base" role="separator">
            <p>
              hasta:
            </p>
        </div>
        <!-- input -->
      <div class="c-form-group">
        <!-- label -->
        <label class="block sr-only" for="with-divider-num-doc-B">Cantidad final</label>
        
        <!-- /label -->
        <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-full lg:w-64" id="with-divider-num-doc-B" name="with-divider-num-doc-B" type="text" placeholder="Ej: 600">
      </div>
      <!-- /input -->
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /input-group -->

with errors

Datos del solicitante

Error: Error: Aqui va un mensaje de error

Show code

Macro

{% from "components/input-group/_macro.input-group.njk" import componentInputGroup %}
{{ componentInputGroup({
  "id": "datos-errors",
  "fieldset": {
    "legend": {
      "text": "Datos del solicitante"
    }
  },
  "errorMessage": {
    "text": "Error: Aqui va un mensaje de error"
  },
  "items": [
    {
      "isSelect": true,
      "name": "titulo",
      "label": {
        "text": "Titulo"
      },
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-20",
      "selectItems": [
        {
          "value": 1,
          "text": "Sr.",
          "selected": true
        },
        {
          "value": 2,
          "text": "Sra."
        }
      ]
    },
    {
      "name": "nombre",
      "label": {
        "text": "Nombre"
      },
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base"
    },
    {
      "name": "apellidos",
      "label": {
        "text": "Apellidos"
      },
      "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base"
    }
  ]
})  }}

Markup


<!-- input-group -->
<div class="c-form-group c-form-group--error">
<!-- fieldset -->
<fieldset role="group" aria-describedby="datos-errors-error">
  <legend class="  font-bold">
    Datos del solicitante
  </legend>
    <!-- error-message -->
  <p id="datos-errors-error" class="block font-semibold text-alert-base">
  <span class="sr-only">Error:</span> Error: Aqui va un mensaje de error
  </p>
  <!-- /error-message -->
  <div class="flex" id="datos-errors">
          <!-- select -->
      <div class="c-form-group mr-base">
        <!-- label -->
        <label class="block" for="datos-errors-titulo">Titulo</label>
        
        <!-- /label -->
        <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-20" id="datos-errors-titulo" name="titulo">
              <option value="1" selected>Sr.</option>
              <option value="2">Sra.</option>
        </select>
      </div>
      <!-- /select -->
        <!-- input -->
      <div class="c-form-group mr-base">
        <!-- label -->
        <label class="block" for="datos-errors-nombre">Nombre</label>
        
        <!-- /label -->
        <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-full lg:w-40 border-alert-base ring-2 ring-alert-base" id="datos-errors-nombre" name="nombre" type="text">
      </div>
      <!-- /input -->
        <!-- input -->
      <div class="c-form-group">
        <!-- label -->
        <label class="block" for="datos-errors-apellidos">Apellidos</label>
        
        <!-- /label -->
        <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-full lg:w-40 border-alert-base ring-2 ring-alert-base" id="datos-errors-apellidos" name="apellidos" type="text">
      </div>
      <!-- /input -->
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /input-group -->

with error on name

Datos del solicitante

Error: Error: Aqui va un mensaje de error

Show code

Macro

{% from "components/input-group/_macro.input-group.njk" import componentInputGroup %}
{{ componentInputGroup({
  "id": "datos-error-nombre-a",
  "fieldset": {
    "legend": {
      "text": "Datos del solicitante"
    }
  },
  "errorMessage": {
    "text": "Error: Aqui va un mensaje de error"
  },
  "items": [
    {
      "isSelect": true,
      "name": "titulo",
      "label": {
        "text": "Titulo"
      },
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-20",
      "selectItems": [
        {
          "value": 1,
          "text": "Sr.",
          "selected": true
        },
        {
          "value": 2,
          "text": "Sra."
        }
      ]
    },
    {
      "name": "nombre",
      "label": {
        "text": "Nombre"
      },
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base"
    },
    {
      "name": "apellidos",
      "label": {
        "text": "Apellidos"
      },
      "classes": "w-full lg:w-auto"
    }
  ]
})  }}

Markup


<!-- input-group -->
<div class="c-form-group c-form-group--error">
<!-- fieldset -->
<fieldset role="group" aria-describedby="datos-error-nombre-a-error">
  <legend class="  font-bold">
    Datos del solicitante
  </legend>
    <!-- error-message -->
  <p id="datos-error-nombre-a-error" class="block font-semibold text-alert-base">
  <span class="sr-only">Error:</span> Error: Aqui va un mensaje de error
  </p>
  <!-- /error-message -->
  <div class="flex" id="datos-error-nombre-a">
          <!-- select -->
      <div class="c-form-group mr-base">
        <!-- label -->
        <label class="block" for="datos-error-nombre-a-titulo">Titulo</label>
        
        <!-- /label -->
        <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-20" id="datos-error-nombre-a-titulo" name="titulo">
              <option value="1" selected>Sr.</option>
              <option value="2">Sra.</option>
        </select>
      </div>
      <!-- /select -->
        <!-- input -->
      <div class="c-form-group mr-base">
        <!-- label -->
        <label class="block" for="datos-error-nombre-a-nombre">Nombre</label>
        
        <!-- /label -->
        <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-full lg:w-40 border-alert-base ring-2 ring-alert-base" id="datos-error-nombre-a-nombre" name="nombre" type="text">
      </div>
      <!-- /input -->
        <!-- input -->
      <div class="c-form-group">
        <!-- label -->
        <label class="block" for="datos-error-nombre-a-apellidos">Apellidos</label>
        
        <!-- /label -->
        <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-full lg:w-auto" id="datos-error-nombre-a-apellidos" name="apellidos" type="text">
      </div>
      <!-- /input -->
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /input-group -->

with error on surname

Datos del solicitante

Error: Error: Aqui va un mensaje de error

Show code

Macro

{% from "components/input-group/_macro.input-group.njk" import componentInputGroup %}
{{ componentInputGroup({
  "id": "datos-error-nombre-b",
  "fieldset": {
    "legend": {
      "text": "Datos del solicitante"
    }
  },
  "errorMessage": {
    "text": "Error: Aqui va un mensaje de error"
  },
  "items": [
    {
      "isSelect": true,
      "name": "titulo",
      "label": {
        "text": "Titulo"
      },
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-20",
      "selectItems": [
        {
          "value": 1,
          "text": "Sr.",
          "selected": true
        },
        {
          "value": 2,
          "text": "Sra."
        }
      ]
    },
    {
      "name": "nombre",
      "label": {
        "text": "Nombre"
      },
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-full lg:w-auto"
    },
    {
      "name": "apellidos",
      "label": {
        "text": "Apellidos"
      },
      "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base"
    }
  ]
})  }}

Markup


<!-- input-group -->
<div class="c-form-group c-form-group--error">
<!-- fieldset -->
<fieldset role="group" aria-describedby="datos-error-nombre-b-error">
  <legend class="  font-bold">
    Datos del solicitante
  </legend>
    <!-- error-message -->
  <p id="datos-error-nombre-b-error" class="block font-semibold text-alert-base">
  <span class="sr-only">Error:</span> Error: Aqui va un mensaje de error
  </p>
  <!-- /error-message -->
  <div class="flex" id="datos-error-nombre-b">
          <!-- select -->
      <div class="c-form-group mr-base">
        <!-- label -->
        <label class="block" for="datos-error-nombre-b-titulo">Titulo</label>
        
        <!-- /label -->
        <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-20" id="datos-error-nombre-b-titulo" name="titulo">
              <option value="1" selected>Sr.</option>
              <option value="2">Sra.</option>
        </select>
      </div>
      <!-- /select -->
        <!-- input -->
      <div class="c-form-group mr-base">
        <!-- label -->
        <label class="block" for="datos-error-nombre-b-nombre">Nombre</label>
        
        <!-- /label -->
        <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-full lg:w-auto" id="datos-error-nombre-b-nombre" name="nombre" type="text">
      </div>
      <!-- /input -->
        <!-- input -->
      <div class="c-form-group">
        <!-- label -->
        <label class="block" for="datos-error-nombre-b-apellidos">Apellidos</label>
        
        <!-- /label -->
        <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-full lg:w-40 border-alert-base ring-2 ring-alert-base" id="datos-error-nombre-b-apellidos" name="apellidos" type="text">
      </div>
      <!-- /input -->
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /input-group -->

with optional form-group classes and more classes applied

Documento de identidad
Show code

Macro

{% from "components/input-group/_macro.input-group.njk" import componentInputGroup %}
{{ componentInputGroup({
  "id": "doc-identidad-classes",
  "namePrefix": "doc-identidad-classes",
  "fieldset": {
    "legend": {
      "text": "Documento de identidad",
      "classes": "c-h2"
    }
  },
  "formGroup": {
    "classes": "bg-warning-light"
  },
  "classes": "grid grid-cols-2 gap-base",
  "items": [
    {
      "name": "tipo-doc",
      "formGroup": {
        "classes": "border mb-0"
      },
      "classes": "w-full lg:w-40 border-success-base",
      "label": {
        "text": "Tipo",
        "classes": "text-sm"
      },
      "isSelect": true,
      "selectItems": [
        {
          "value": 1,
          "text": "NIF",
          "selected": true
        },
        {
          "value": 2,
          "text": "Pasaporte"
        }
      ]
    },
    {
      "name": "num-doc",
      "formGroup": {
        "classes": "border"
      },
      "classes": "w-full lg:w-64 border-alert-base",
      "label": {
        "text": "Número",
        "classes": "text-sm"
      },
      "placeholder": "Ej: 28999876V"
    }
  ]
})  }}

Markup


<!-- input-group -->
<div class="c-form-group bg-warning-light">
<!-- fieldset -->
<fieldset role="group">
  <legend class="c-h2">
    Documento de identidad
  </legend>
    <div class="grid grid-cols-2 gap-base" id="doc-identidad-classes">
          <!-- select -->
      <div class="c-form-group border mb-0">
        <!-- label -->
        <label class="block text-sm" for="doc-identidad-classes-tipo-doc">Tipo</label>
        
        <!-- /label -->
        <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-full lg:w-40 border-success-base" id="doc-identidad-classes-tipo-doc" name="doc-identidad-classes-tipo-doc">
              <option value="1" selected>NIF</option>
              <option value="2">Pasaporte</option>
        </select>
      </div>
      <!-- /select -->
        <!-- input -->
      <div class="c-form-group border">
        <!-- label -->
        <label class="block text-sm" for="doc-identidad-classes-num-doc">Número</label>
        
        <!-- /label -->
        <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-full lg:w-64 border-alert-base" id="doc-identidad-classes-num-doc" name="doc-identidad-classes-num-doc" type="text" placeholder="Ej: 28999876V">
      </div>
      <!-- /input -->
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /input-group -->

with autocomplete

Datos del solicitante
Show code

Macro

{% from "components/input-group/_macro.input-group.njk" import componentInputGroup %}
{{ componentInputGroup({
  "id": "datos-autocomplete",
  "fieldset": {
    "legend": {
      "text": "Datos del solicitante"
    }
  },
  "items": [
    {
      "isSelect": true,
      "name": "titulo",
      "label": {
        "text": "Titulo"
      },
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-20",
      "selectItems": [
        {
          "value": 1,
          "text": "Sr.",
          "selected": true
        },
        {
          "value": 2,
          "text": "Sra."
        }
      ]
    },
    {
      "name": "nombre",
      "label": {
        "text": "Nombre"
      },
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-full lg:w-auto",
      "autocomplete": "given-name"
    },
    {
      "name": "apellidos",
      "label": {
        "text": "Apellidos"
      },
      "classes": "w-full lg:w-auto",
      "autocomplete": "family-name"
    }
  ]
})  }}

Markup


<!-- input-group -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset role="group">
  <legend class="  font-bold">
    Datos del solicitante
  </legend>
    <div class="flex" id="datos-autocomplete">
          <!-- select -->
      <div class="c-form-group mr-base">
        <!-- label -->
        <label class="block" for="datos-autocomplete-titulo">Titulo</label>
        
        <!-- /label -->
        <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-20" id="datos-autocomplete-titulo" name="titulo">
              <option value="1" selected>Sr.</option>
              <option value="2">Sra.</option>
        </select>
      </div>
      <!-- /select -->
        <!-- input -->
      <div class="c-form-group mr-base">
        <!-- label -->
        <label class="block" for="datos-autocomplete-nombre">Nombre</label>
        
        <!-- /label -->
        <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-full lg:w-auto" id="datos-autocomplete-nombre" name="nombre" type="text" autocomplete="given-name">
      </div>
      <!-- /input -->
        <!-- input -->
      <div class="c-form-group">
        <!-- label -->
        <label class="block" for="datos-autocomplete-apellidos">Apellidos</label>
        
        <!-- /label -->
        <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-full lg:w-auto" id="datos-autocomplete-apellidos" name="apellidos" type="text" autocomplete="family-name">
      </div>
      <!-- /input -->
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /input-group -->

with input attributes

Datos del solicitante
Show code

Macro

{% from "components/input-group/_macro.input-group.njk" import componentInputGroup %}
{{ componentInputGroup({
  "id": "datos-attributes",
  "fieldset": {
    "legend": {
      "text": "Datos del solicitante"
    }
  },
  "items": [
    {
      "isSelect": true,
      "name": "titulo",
      "label": {
        "text": "Titulo"
      },
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-20",
      "attributes": {
        "data-title": "titulo"
      },
      "selectItems": [
        {
          "value": 1,
          "text": "Sr.",
          "selected": true
        },
        {
          "value": 2,
          "text": "Sra."
        }
      ]
    },
    {
      "name": "nombre",
      "label": {
        "text": "Nombre"
      },
      "formGroup": {
        "classes": "mr-base"
      },
      "classes": "w-full lg:w-auto",
      "attributes": {
        "data-name": "nombre"
      }
    },
    {
      "name": "apellidos",
      "label": {
        "text": "Apellidos"
      },
      "classes": "w-full lg:w-auto",
      "attributes": {
        "data-surname": "apellidos"
      }
    }
  ]
})  }}

Markup


<!-- input-group -->
<div class="c-form-group">
<!-- fieldset -->
<fieldset role="group">
  <legend class="  font-bold">
    Datos del solicitante
  </legend>
    <div class="flex" id="datos-attributes">
          <!-- select -->
      <div class="c-form-group mr-base">
        <!-- label -->
        <label class="block" for="datos-attributes-titulo">Titulo</label>
        
        <!-- /label -->
        <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-20" id="datos-attributes-titulo" name="titulo" data-title="titulo">
              <option value="1" selected>Sr.</option>
              <option value="2">Sra.</option>
        </select>
      </div>
      <!-- /select -->
        <!-- input -->
      <div class="c-form-group mr-base">
        <!-- label -->
        <label class="block" for="datos-attributes-nombre">Nombre</label>
        
        <!-- /label -->
        <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-full lg:w-auto" id="datos-attributes-nombre" name="nombre" type="text" data-name="nombre">
      </div>
      <!-- /input -->
        <!-- input -->
      <div class="c-form-group">
        <!-- label -->
        <label class="block" for="datos-attributes-apellidos">Apellidos</label>
        
        <!-- /label -->
        <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base mb-0 w-full lg:w-auto" id="datos-attributes-apellidos" name="apellidos" type="text" data-surname="apellidos">
      </div>
      <!-- /input -->
  </div>
</fieldset>
<!-- /fieldset --></div>
<!-- /input-group -->