Input

Mostrar parámetros

Parámetros del componente

              params:
- name: id
  type: string
  required: true
  description: The id of the input.
- name: name
  type: string
  required: true
  description: The name of the input, which is submitted with the form data.
- 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: value
  type: string
  required: false
  description: Optional initial value of the input.
- name: describedBy
  type: string
  required: false
  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
- name: label
  type: object
  required: true
  description: Options for the label component.
  isComponent: true
- 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: errorId
  type: string
  required: false
  description: Custom ID to add to the `aria-errormessage` attribute, used to provide additional descriptive information for screenreader users. Used in date-input component with errors.
- name: describedBy
  type: string
  required: false
  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
- 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)
- name: classes
  type: string
  required: false
  description: Classes to add to 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 "postal-code" or "username". 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: placeholder
  type: string
  required: false
  description: Placeholder text
- name: disabled
  type: boolean
  required: false
  description: If true, input will be disabled.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the anchor tag.

Por defecto #

Esto es un label

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "id": "input-example-a",
  "name": "test-name"
}) }}

HTML

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-example-a">Esto es un label</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" id="input-example-a" name="test-name" type="text">
</div>
<!-- /input -->

Deshabilitado #

Esto es un label

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "id": "input-example-b",
  "name": "test-name",
  "disabled": true
}) }}

HTML

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-example-b">Esto es un label</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" id="input-example-b" name="test-name" type="text" disabled>
</div>
<!-- /input -->

Con pista #

Esto es un label

Esto es una pista.

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "input-with-hint-text",
  "name": "test-name"
}) }}

HTML

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-with-hint-text">Esto es un label</label>
  <!-- /label -->
  <!-- hint -->
  <p id="input-with-hint-text-hint" class="block text-neutral-dark">Esto es una pista.</p>
  <!-- /hint -->
  <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" id="input-with-hint-text" name="test-name" type="text" aria-describedby="input-with-hint-text-hint">
</div>
<!-- /input -->

Con mensaje de error #

Esto es un label

Esto es una pista.

Error:Error: esto es un mensaje de error

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "input-with-error-message-a",
  "name": "test-name",
  "errorMessage": {
    "text": "Error: esto es un mensaje de error"
  }
}) }}

HTML

<!-- input -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="input-with-error-message-a">Esto es un label</label>
  <!-- /label -->
  <!-- hint -->
  <p id="input-with-error-message-a-hint" class="block text-neutral-dark">Esto es una pista.</p>
  <!-- /hint -->
  <!-- error-message -->
  <p id="input-with-error-message-a-error" class="block font-semibold text-alert-base">
    <span class="sr-only">Error:</span>Error: esto es un mensaje de error
  </p>
  <!-- /error-message -->
  <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 border-alert-base ring-2 ring-alert-base " id="input-with-error-message-a" name="test-name" type="text" aria-describedby="input-with-error-message-a-hint input-with-error-message-a-error" aria-errormessage="input-with-error-message-a-error" aria-invalid="true">
</div>
<!-- /input -->

Con mensaje de error con id personalizado #

Esto es un label

Esto es una pista.

Error:Error: esto es un mensaje de error

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "input-with-error-message-b",
  "name": "test-name",
  "errorId": "custom-error-id",
  "errorMessage": {
    "text": "Error: esto es un mensaje de error"
  }
}) }}

HTML

<!-- input -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="input-with-error-message-b">Esto es un label</label>
  <!-- /label -->
  <!-- hint -->
  <p id="input-with-error-message-b-hint" class="block text-neutral-dark">Esto es una pista.</p>
  <!-- /hint -->
  <!-- error-message -->
  <p id="custom-error-id" class="block font-semibold text-alert-base">
    <span class="sr-only">Error:</span>Error: esto es un mensaje de error
  </p>
  <!-- /error-message -->
  <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 border-alert-base ring-2 ring-alert-base " id="input-with-error-message-b" name="test-name" type="text" aria-describedby="input-with-error-message-b-hint" aria-errormessage="custom-error-id" aria-invalid="true">
</div>
<!-- /input -->

Con clase de anchura completa #

Este ejemplo usa todo el ancho disponible. Mira el archivo tailwind.config.js para una lista completa de anchuras disponibles.

Esto es un label

Esto es una pista.

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "input-width-full",
  "name": "test-width-full",
  "classes": "w-full"
}) }}

HTML

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-width-full">Esto es un label</label>
  <!-- /label -->
  <!-- hint -->
  <p id="input-width-full-hint" class="block text-neutral-dark">Esto es una pista.</p>
  <!-- /hint -->
  <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 w-full" id="input-width-full" name="test-width-full" type="text" aria-describedby="input-width-full-hint">
</div>
<!-- /input -->

Con clase de anchura 1/2 #

Este ejemplo usa la mitad del ancho disponible por su contenedor. Mira el archivo tailwind.config.js para una lista completa de anchuras disponibles.

Esto es un label

Esto es una pista.

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "input-width-half",
  "name": "test-width-half",
  "classes": "w-1/2"
}) }}

HTML

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-width-half">Esto es un label</label>
  <!-- /label -->
  <!-- hint -->
  <p id="input-width-half-hint" class="block text-neutral-dark">Esto es una pista.</p>
  <!-- /hint -->
  <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 w-1/2" id="input-width-half" name="test-width-half" type="text" aria-describedby="input-width-half-hint">
</div>
<!-- /input -->

Con clase width-32 #

Este ejemplo usa una anchura predefinida de DESY. Mira el archivo tailwind.config.js para una lista completa de anchuras disponibles

Esto es un label

Esto es una pista.

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "input-width-32",
  "name": "test-width-32",
  "classes": "w-32"
}) }}

HTML

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-width-32">Esto es un label</label>
  <!-- /label -->
  <!-- hint -->
  <p id="input-width-32-hint" class="block text-neutral-dark">Esto es una pista.</p>
  <!-- /hint -->
  <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 w-32" id="input-width-32" name="test-width-32" type="text" aria-describedby="input-width-32-hint">
</div>
<!-- /input -->

Con label como encabezado #

Esto es un label

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label",
    "isPageHeading": true
  },
  "id": "input-with-page-heading",
  "name": "test-name"
}) }}

HTML

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <h1 class="block ">
    <label class="block" for="input-with-page-heading">Esto es un label</label>
  </h1>
  <!-- /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" id="input-with-page-heading" name="test-name" type="text">
</div>
<!-- /input -->

Con clases de form-group opcionales #

Esto es un label

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "id": "input-example-c",
  "name": "test-name",
  "formGroup": {
    "classes": "p-base bg-primary-light"
  }
}) }}

HTML

<!-- input -->
<div class="c-form-group p-base bg-primary-light">
  <!-- label -->
  <label class="block" for="input-example-c">Esto es un label</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" id="input-example-c" name="test-name" type="text">
</div>
<!-- /input -->

Con valores de autocompletado #

Código postal

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Código postal"
  },
  "id": "input-with-autocomplete-attribute",
  "name": "postcode",
  "autocomplete": "postal-code"
}) }}

HTML

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-with-autocomplete-attribute">Código postal</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" id="input-with-autocomplete-attribute" name="postcode" type="text" autocomplete="postal-code">
</div>
<!-- /input -->

Con al atributo pattern #

Usa el atributo pattern para elegir un patrón de entrada de datos nativo del navegador.

Solo números

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Solo números"
  },
  "id": "input-with-pattern-attribute",
  "name": "numbers-only",
  "type": "tel",
  "pattern": "[0-9]*"
}) }}

HTML

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-with-pattern-attribute">Solo números</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" id="input-with-pattern-attribute" name="numbers-only" type="tel" pattern="[0-9]*">
</div>
<!-- /input -->

Campo obligatorio #

El formulario debe comenzar con un párrafo que ponga: * Todos los campos marcados con asterisco son obligatorios.

Campo obligatorio *

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Campo obligatorio *"
  },
  "id": "input-with-required-attribute",
  "name": "input-with-required-attribute",
  "attributes": {
    "required": ""
  }
}) }}

HTML

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-with-required-attribute">Campo obligatorio *</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" id="input-with-required-attribute" name="input-with-required-attribute" type="text" required="">
</div>
<!-- /input -->

Peque #

Input peque

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Input peque"
  },
  "id": "classes-applied-a",
  "name": "classes-applied-a",
  "classes": "c-input--sm"
}) }}

HTML

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="classes-applied-a">Input peque</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 c-input--sm" id="classes-applied-a" name="classes-applied-a" type="text">
</div>
<!-- /input -->

Con clases de css aplicadas #

Label en linea + Input flexible y mensaje de error

Label en línea:

Error:Error: Esto es un mensaje de error

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "formGroup": {
    "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
  },
  "label": {
    "text": "Label en línea:",
    "classes": "lg:py-sm lg:mt-sm"
  },
  "id": "classes-applied-b",
  "name": "classes-applied-b",
  "errorMessage": {
    "text": "Error: Esto es un mensaje de error",
    "classes": "order-1 w-full pt-sm"
  },
  "classes": "lg:flex-1"
}) }}

HTML

<!-- input -->
<div class="c-form-group c-form-group--error lg:flex lg:flex-wrap lg:items-center lg:gap-x-base">
  <!-- label -->
  <label class="block lg:py-sm lg:mt-sm" for="classes-applied-b">Label en línea:</label>
  <!-- /label -->
  <!-- error-message -->
  <p id="classes-applied-b-error" class="block font-semibold text-alert-base order-1 w-full pt-sm">
    <span class="sr-only">Error:</span>Error: Esto es un mensaje de error
  </p>
  <!-- /error-message -->
  <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 lg:flex-1 border-alert-base ring-2 ring-alert-base " id="classes-applied-b" name="classes-applied-b" type="text" aria-describedby="classes-applied-b-error" aria-errormessage="classes-applied-b-error" aria-invalid="true">
</div>
<!-- /input -->

Tipo personalizado #

Si no se espacifica, el tipo por defecto es text. Este Input tiene un type="number"

Input de tipo número

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Input de tipo número"
  },
  "id": "custom-type",
  "name": "custom-type",
  "type": "number"
}) }}

HTML

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="custom-type">Input de tipo 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" id="custom-type" name="custom-type" type="number">
</div>
<!-- /input -->

Valor #

Esto es un label

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "id": "value",
  "name": "valor",
  "value": "Esto es un valor"
}) }}

HTML

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="value">Esto es un label</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" id="value" name="valor" type="text" value="Esto es un valor">
</div>
<!-- /input -->

Placeholder #

Esto es un label

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "id": "placeholder",
  "name": "placeholder",
  "placeholder": "Esto es un placeholder"
}) }}

HTML

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="placeholder">Esto es un label</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" id="placeholder" name="placeholder" type="text" placeholder="Esto es un placeholder">
</div>
<!-- /input -->

Con describedby #

Con describedBy

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Con describedBy"
  },
  "id": "with-describedby-a",
  "name": "with-describedby-a",
  "describedBy": "input-example-a"
}) }}

HTML

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="with-describedby-a">Con describedBy</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" id="with-describedby-a" name="with-describedby-a" type="text" aria-describedby="input-example-a">
</div>
<!-- /input -->

Pista con describedby #

Pista con describedBy

Esto es una pista.

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Pista con describedBy"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "with-describedby-b",
  "name": "with-describedby-b",
  "describedBy": "input-example-a"
}) }}

HTML

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="with-describedby-b">Pista con describedBy</label>
  <!-- /label -->
  <!-- hint -->
  <p id="with-describedby-b-hint" class="block text-neutral-dark">Esto es una pista.</p>
  <!-- /hint -->
  <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" id="with-describedby-b" name="with-describedby-b" type="text" aria-describedby="input-example-a with-describedby-b-hint">
</div>
<!-- /input -->

Error con describedby #

Error con describedBy

Error:Error: esto es un mensaje de error

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Error con describedBy"
  },
  "id": "with-describedby-c",
  "name": "with-describedby-c",
  "describedBy": "input-example-a",
  "errorMessage": {
    "text": "Error: esto es un mensaje de error"
  }
}) }}

HTML

<!-- input -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="with-describedby-c">Error con describedBy</label>
  <!-- /label -->
  <!-- error-message -->
  <p id="with-describedby-c-error" class="block font-semibold text-alert-base">
    <span class="sr-only">Error:</span>Error: esto es un mensaje de error
  </p>
  <!-- /error-message -->
  <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 border-alert-base ring-2 ring-alert-base " id="with-describedby-c" name="with-describedby-c" type="text" aria-describedby="input-example-a with-describedby-c-error" aria-errormessage="with-describedby-c-error" aria-invalid="true">
</div>
<!-- /input -->

Con error, pista y describedby #

Esto es un label

Esto es una pista.

Error:Error: esto es un mensaje de error

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  },
  "id": "input-with-both",
  "name": "test-name",
  "describedBy": "input-example-a",
  "errorMessage": {
    "text": "Error: esto es un mensaje de error"
  }
}) }}

HTML

<!-- input -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="input-with-both">Esto es un label</label>
  <!-- /label -->
  <!-- hint -->
  <p id="input-with-both-hint" class="block text-neutral-dark">Esto es una pista.</p>
  <!-- /hint -->
  <!-- error-message -->
  <p id="input-with-both-error" class="block font-semibold text-alert-base">
    <span class="sr-only">Error:</span>Error: esto es un mensaje de error
  </p>
  <!-- /error-message -->
  <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 border-alert-base ring-2 ring-alert-base " id="input-with-both" name="test-name" type="text" aria-describedby="input-example-a input-with-both-hint input-with-both-error" aria-errormessage="input-with-both-error" aria-invalid="true">
</div>
<!-- /input -->

Inputmode #

Este atributo proporciona información al navegador para que se pueda mostrar el teclado virtual apropiado, especialmente en dispositivos móviles. Este input tiene un inputmode="email"

Inputmode

Mostrar código

Contenido

Nunjucks macro

{% from "components/input/_macro.input.njk" import componentInput %}

{{ componentInput({
  "label": {
    "text": "Inputmode"
  },
  "id": "inputmode",
  "name": "inputmode",
  "inputmode": "email"
}) }}

HTML

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="inputmode">Inputmode</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" id="inputmode" name="inputmode" type="text" inputmode="email">
</div>
<!-- /input -->