Input - Textové pole

Textové pole

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-form-group govuk-input-component">

  <label class="govuk-label  govuk-body-m" for="input-example">
    Názov textového poľa
      <span class="govuk-body-s">(nepovinné)</span>
  </label>
  <div class="govuk-input-container">
    <input class="govuk-input  " id="input-example" name="default" type="text">


  </div>
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Názov textového poľa"
  },
  id: "input-example",
  name: "default"
}) }}

Textové pole with hover

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-form-group govuk-input-component">

  <label class="govuk-label  govuk-body-m" for="input-example-hover">
    Názov textového poľa
      <span class="govuk-body-s">(nepovinné)</span>
  </label>
  <div class="govuk-input-container">
    <input class="govuk-input :hover  " id="input-example-hover" name="hover" type="text">


  </div>
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Názov textového poľa"
  },
  id: "input-example-hover",
  name: "hover",
  classes: ":hover"
}) }}

Textové pole with focus

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-form-group govuk-input-component">

  <label class="govuk-label  govuk-body-m" for="input-example-focus">
    Názov textového poľa
      <span class="govuk-body-s">(nepovinné)</span>
  </label>
  <div class="govuk-input-container">
    <input class="govuk-input :focus  " id="input-example-focus" name="test-name-focus" type="text">


  </div>
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Názov textového poľa"
  },
  id: "input-example-focus",
  name: "test-name-focus",
  classes: ":focus"
}) }}

Textové pole with disabled

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-form-group govuk-input-component">

  <label class="govuk-label  govuk-body-m" for="input-example-disabled">
    Názov textového poľa
      <span class="govuk-body-s">(nepovinné)</span>
  </label>
  <div class="govuk-input-container">
    <input class="govuk-input  " id="input-example-disabled" name="test-name-disabled" type="text" disabled>


  </div>
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Názov textového poľa"
  },
  id: "input-example-disabled",
  name: "test-name-disabled",
  disabled: true
}) }}

Textové pole with hint text

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-form-group govuk-input-component">

  <label class="govuk-label  govuk-body-m" for="input-with-hint-text">
    Názov textového poľa
      <span class="govuk-body-s">(nepovinné)</span>
      <p class="govuk-body-s">Popis textového poľa</p>
  </label>
  <div class="govuk-input-container">
    <input class="govuk-input  " id="input-with-hint-text" name="test-name-2" type="text">


  </div>
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Názov textového poľa"
  },
  hint: {
    text: "Popis textového poľa"
  },
  id: "input-with-hint-text",
  name: "test-name-2"
}) }}

Textové pole with hint text and required

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-form-group govuk-input-component">

  <label class="govuk-label  govuk-body-m" for="input-with-hint-text-required">
    Názov textového poľa
      <span class="required">*</span>
      <p class="govuk-body-s">Popis textového poľa</p>
  </label>
  <div class="govuk-input-container">
    <input class="govuk-input  " id="input-with-hint-text-required" name="test-name-3" type="text">


  </div>
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  requiredProps: true,
  label: {
    text: "Názov textového poľa"
  },
  hint: {
    text: "Popis textového poľa"
  },
  id: "input-with-hint-text-required",
  name: "test-name-3"
}) }}

Textové pole with error message

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-form-group govuk-input-component">

  <label class="govuk-label  govuk-body-m" for="input-with-error-message">
    Názov textového poľa
      <span class="govuk-body-s">(nepovinné)</span>
      <p class="govuk-body-s">Popis textového poľa</p>
  </label>
  <div class="govuk-input-container">
    <input class="govuk-input govuk-input--error  " id="input-with-error-message" name="test-name-4" type="text">


      <div class="input-icon">
        <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3.72543 17.4999H16.2754C17.5588 17.4999 18.3588 16.1083 17.7171 14.9999L11.4421 4.15828C10.8004 3.04994 9.20043 3.04994 8.55876 4.15828L2.28376 14.9999C1.64209 16.1083 2.44209 17.4999 3.72543 17.4999ZM10.0004 11.6666C9.54209 11.6666 9.16709 11.2916 9.16709 10.8333V9.16661C9.16709 8.70828 9.54209 8.33328 10.0004 8.33328C10.4588 8.33328 10.8338 8.70828 10.8338 9.16661V10.8333C10.8338 11.2916 10.4588 11.6666 10.0004 11.6666ZM10.8338 14.9999H9.16709V13.3333H10.8338V14.9999Z" fill="#C3112B"/>
        </svg>
      </div>
  </div>
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Názov textového poľa"
  },
  hint: {
    text: "Popis textového poľa"
  },
  id: "input-with-error-message",
  name: "test-name-4",
  errorMessage: {
    text: null
  }
}) }}

Textové pole with descriptive text

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-form-group govuk-input-component">

  <label class="govuk-label  govuk-body-m" for="input-with-hint-text-descriptiveText">
    Názov textového poľa
      <span class="govuk-body-s">(nepovinné)</span>
  </label>
  <div class="govuk-input-container">
    <input class="govuk-input  " id="input-with-hint-text-descriptiveText" name="test-name-5" type="text">

      <p class="govuk-body-s descriptive-text">Popisný text</p>

  </div>
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Názov textového poľa"
  },
  id: "input-with-hint-text-descriptiveText",
  name: "test-name-5",
  descriptionText: true
}) }}

Textové pole small

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-form-group govuk-input-component">

  <label class="govuk-label  small  govuk-body-m" for="input-small">
    Názov textového poľa
      <span class="govuk-body-s">(nepovinné)</span>
  </label>
  <div class="govuk-input-container">
    <input class="govuk-input  small  " id="input-small" name="test-name-6" type="text">


  </div>
</div>

Macro

{% from "govuk/components/input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "Názov textového poľa"
  },
  id: "input-small",
  name: "test-name-6",
  smallInput: true
}) }}