Input examples

Show params

Params

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.

default

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "Label text goes here"
  },
  "id": "input-example-a",
  "name": "test-name"
})  }}

Markup

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-example-a">Label text goes here</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 -->

disabled

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "Label text goes here"
  },
  "id": "input-example-b",
  "name": "test-name",
  "disabled": true
})  }}

Markup

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-example-b">Label text goes here</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 -->

with hint text

Hint text goes here

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "Label text goes here"
  },
  "hint": {
    "text": "Hint text goes here"
  },
  "id": "input-with-hint-text",
  "name": "test-name"
})  }}

Markup

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-with-hint-text">Label text goes here</label>
  
  <!-- /label -->
  <!-- hint -->
  <p id="input-with-hint-text-hint" class="block text-neutral-dark">
    Hint text goes here
  </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 -->

with error message

Hint text goes here

Error: Error: Error message goes here

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "Label text goes here"
  },
  "hint": {
    "text": "Hint text goes here"
  },
  "id": "input-with-error-message-a",
  "name": "test-name",
  "errorMessage": {
    "text": "Error: Error message goes here"
  }
})  }}

Markup

<!-- input -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="input-with-error-message-a">Label text goes here</label>
  
  <!-- /label -->
  <!-- hint -->
  <p id="input-with-error-message-a-hint" class="block text-neutral-dark">
    Hint text goes here
  </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: Error message goes here
  </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 -->

with error message with custom errorId

Hint text goes here

Error: Error: Error message goes here

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "Label text goes here"
  },
  "hint": {
    "text": "Hint text goes here"
  },
  "id": "input-with-error-message-b",
  "name": "test-name",
  "errorId": "custom-error-id",
  "errorMessage": {
    "text": "Error: Error message goes here"
  }
})  }}

Markup

<!-- input -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="input-with-error-message-b">Label text goes here</label>
  
  <!-- /label -->
  <!-- hint -->
  <p id="input-with-error-message-b-hint" class="block text-neutral-dark">
    Hint text goes here
  </p>
  <!-- /hint -->
  <!-- error-message -->
  <p id="custom-error-id" class="block font-semibold text-alert-base">
  <span class="sr-only">Error:</span> Error: Error message goes here
  </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 -->

with width full class

See spacing in tailwind.config.js for a complete list of available widths

Hint text goes here

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "Label text goes here"
  },
  "hint": {
    "text": "Hint text goes here"
  },
  "id": "input-width-full",
  "name": "test-width-full",
  "classes": "w-full"
})  }}

Markup

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-width-full">Label text goes here</label>
  
  <!-- /label -->
  <!-- hint -->
  <p id="input-width-full-hint" class="block text-neutral-dark">
    Hint text goes here
  </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 -->

with width 1/2 class

See spacing in tailwind.config.js for a complete list of available widths

Hint text goes here

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "Label text goes here"
  },
  "hint": {
    "text": "Hint text goes here"
  },
  "id": "input-width-half",
  "name": "test-width-half",
  "classes": "w-1/2"
})  }}

Markup

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-width-half">Label text goes here</label>
  
  <!-- /label -->
  <!-- hint -->
  <p id="input-width-half-hint" class="block text-neutral-dark">
    Hint text goes here
  </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 -->

with width-32 class

See spacing in tailwind.config.js for a complete list of available widths

Hint text goes here

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "Label text goes here"
  },
  "hint": {
    "text": "Hint text goes here"
  },
  "id": "input-width-32",
  "name": "test-width-32",
  "classes": "w-32"
})  }}

Markup

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-width-32">Label text goes here</label>
  
  <!-- /label -->
  <!-- hint -->
  <p id="input-width-32-hint" class="block text-neutral-dark">
    Hint text goes here
  </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 -->

with label as page heading

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "Label text goes here",
    "isPageHeading": true
  },
  "id": "input-with-page-heading",
  "name": "test-name"
})  }}

Markup

<!-- input -->
<div class="c-form-group">
  <!-- label -->
      <h1 class="block "><label class="block" for="input-with-page-heading">Label text goes here</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 -->

with optional form-group classes

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "Label text goes here"
  },
  "id": "input-example-c",
  "name": "test-name",
  "formGroup": {
    "classes": "extra-class"
  }
})  }}

Markup

<!-- input -->
<div class="c-form-group extra-class">
  <!-- label -->
  <label class="block" for="input-example-c">Label text goes here</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 -->

with autocomplete attribute

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "Postcode"
  },
  "id": "input-with-autocomplete-attribute",
  "name": "postcode",
  "autocomplete": "postal-code"
})  }}

Markup

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-with-autocomplete-attribute">Postcode</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 -->

with pattern attribute

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "Numbers only"
  },
  "id": "input-with-pattern-attribute",
  "name": "numbers-only",
  "type": "tel",
  "pattern": "[0-9]*"
})  }}

Markup

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-with-pattern-attribute">Numbers only</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 -->

with required attribute

The form must start with a paragraph: * Todos los campos marcados con asterisco son obligatorios.

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "Required field *"
  },
  "id": "input-with-required-attribute",
  "name": "input-with-required-attribute",
  "attributes": {
    "required": ""
  }
})  }}

Markup

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="input-with-required-attribute">Required field *</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 -->

small

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "Input small"
  },
  "id": "classes-applied-a",
  "name": "classes-applied-a",
  "classes": "c-input--sm"
})  }}

Markup

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="classes-applied-a">Input small</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 -->

with custom classes applied

Inline label + flexible input and error message

Error: Error: Error message goes here

Show code

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": "Inline label:",
    "classes": "lg:py-sm lg:mt-sm"
  },
  "id": "classes-applied-b",
  "name": "classes-applied-b",
  "errorMessage": {
    "text": "Error: Error message goes here",
    "classes": "order-1 w-full pt-sm"
  },
  "classes": "lg:flex-1"
})  }}

Markup

<!-- 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">Inline label:</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: Error message goes here
  </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 -->

custom type

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "Custom type number"
  },
  "id": "custom-type",
  "name": "custom-type",
  "type": "number"
})  }}

Markup

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

value

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "Value"
  },
  "id": "value",
  "name": "value",
  "value": "This is a value"
})  }}

Markup

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="value">Value</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="value" type="text" value="This is a value">
</div>
<!-- /input -->

placeholder

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "Value"
  },
  "id": "placeholder",
  "name": "placeholder",
  "placeholder": "This is a placeholder"
})  }}

Markup

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="placeholder">Value</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="This is a placeholder">
</div>
<!-- /input -->

with describedBy

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "With describedBy"
  },
  "id": "with-describedby-a",
  "name": "with-describedby-a",
  "describedBy": "input-example-a"
})  }}

Markup

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="with-describedby-a">With 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 -->

hint with describedBy

This is a hint

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "Hint with describedBy"
  },
  "hint": {
    "text": "This is a hint"
  },
  "id": "with-describedby-b",
  "name": "with-describedby-b",
  "describedBy": "input-example-a"
})  }}

Markup

<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="with-describedby-b">Hint with describedBy</label>
  
  <!-- /label -->
  <!-- hint -->
  <p id="with-describedby-b-hint" class="block text-neutral-dark">
    This is a hint
  </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 with describedBy

Error: Error: Error message goes here

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "Error with describedBy"
  },
  "id": "with-describedby-c",
  "name": "with-describedby-c",
  "describedBy": "input-example-a",
  "errorMessage": {
    "text": "Error: Error message goes here"
  }
})  }}

Markup

<!-- input -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="with-describedby-c">Error with 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: Error message goes here
  </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 -->

with error, hint and describedBy

Hint text goes here

Error: Error: Error message goes here

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "Label text goes here"
  },
  "hint": {
    "text": "Hint text goes here"
  },
  "id": "input-with-both",
  "name": "test-name",
  "describedBy": "input-example-a",
  "errorMessage": {
    "text": "Error: Error message goes here"
  }
})  }}

Markup

<!-- input -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="input-with-both">Label text goes here</label>
  
  <!-- /label -->
  <!-- hint -->
  <p id="input-with-both-hint" class="block text-neutral-dark">
    Hint text goes here
  </p>
  <!-- /hint -->
  <!-- error-message -->
  <p id="input-with-both-error" class="block font-semibold text-alert-base">
  <span class="sr-only">Error:</span> Error: Error message goes here
  </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

Show code

Macro

{% from "components/input/_macro.input.njk" import componentInput %}
{{ componentInput({
  "label": {
    "text": "Inputmode"
  },
  "id": "inputmode",
  "name": "inputmode",
  "inputmode": "email"
})  }}

Markup

<!-- 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 -->