Toto je interná vývojová aplikácia.
Ak sa chcete dozvedieť, ako používať systém IDSK system vo svojom projekte, pozrite si Ako začať.

Input - Textové pole

Textové pole

Otvoriť ukážku na novej záložke : textové pole

Zdrojový kód

HTML

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

Makro

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

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

Textové pole so stavom :hover

Otvoriť ukážku na novej záložke : textové pole so stavom :hover

Zdrojový kód

HTML

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

Makro

{% 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 so stavom :focus

Otvoriť ukážku na novej záložke : textové pole so stavom :focus

Zdrojový kód

HTML

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

Makro

{% 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 ako zneplatnené

Otvoriť ukážku na novej záložke : textové pole ako zneplatnené

Zdrojový kód

HTML

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

Makro

{% 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 s nápovedou

Otvoriť ukážku na novej záložke : textové pole s nápovedou

Zdrojový kód

HTML

<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>
  </label>
  <p class="govuk-body-s" id="hint-input-with-hint-text">Popis textového poľa</p>
  <div class="govuk-input-container">
    <input class="govuk-input  "  aria-describedby="hint-input-with-hint-text "  id="input-with-hint-text" name="test-name-2" type="text">


  </div>
</div>

Makro

{% 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 s nápovedou a ako povinné

Otvoriť ukážku na novej záložke : textové pole s nápovedou a ako povinné

Zdrojový kód

HTML

<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>
  </label>
  <p class="govuk-body-s" id="hint-input-with-hint-text-required">Popis textového poľa</p>
  <div class="govuk-input-container">
    <input class="govuk-input  "  aria-describedby="hint-input-with-hint-text-required "  id="input-with-hint-text-required" name="test-name-3" type="text">


  </div>
</div>

Makro

{% 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 s chybovým výpisom

Otvoriť ukážku na novej záložke : textové pole s chybovým výpisom

Zdrojový kód

HTML

<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>
  </label>
  <p class="govuk-body-s" id="hint-input-with-error-message">Popis textového poľa</p>
  <div class="govuk-input-container">
    <input class="govuk-input govuk-input--error  "  aria-describedby="hint-input-with-error-message "  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>

Makro

{% 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 s popisným textom

Otvoriť ukážku na novej záložke : textové pole s popisným textom

Zdrojový kód

HTML

<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  "  aria-describedby="description-input-with-hint-text-descriptiveText"  id="input-with-hint-text-descriptiveText" name="test-name-5" type="text">

      <p class="govuk-body-s descriptive-text" id="description-input-with-hint-text-descriptiveText">Popisný text</p>

  </div>
</div>

Makro

{% 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: "Popisný text"
}) }}

Textové pole malé

Otvoriť ukážku na novej záložke : textové pole malé

Zdrojový kód

HTML

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

Makro

{% 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
}) }}