Sha256: f4939ed100a849782b8c443eaae3bd5b2c53df7c53dd8c51ca44af22e5fd7a4b

Contents?: true

Size: 1.27 KB

Versions: 17

Compression:

Stored size: 1.27 KB

Contents

name: Contextual guidance
description: Provides a container with additional information when focusing an input field (e.g. input, textarea)
body: |
  This component is build to be used with an input field passed in as a block and must reference its ID using the `html_for` attribute.

  On tablet and desktop, the guidance container is set to float on the page and prevent other elements from moving around (e.g. pushing next fields down the page).
part_of_admin_layout: true
accessibility_criteria: |
  The component must:

  * be hidden by default
  * be visible when the associated input field if focused
  * stay visible until another input field with guidance is being focused
shared_accessibility_criteria:
  - link
examples:
  default:
    description: Reveals a contextul guidance on the side overflowing the container
    data:
      html_for: news-title
      title: Writing a news title
      content: |
        <p>The title must make clear what the content offers users. Use the words your users do to help them find this. Avoid wordplay or teases.</p>
      block: |
        <div class="govuk-form-group">
          <label class="gem-c-label govuk-label" for="news-title">News title</label>
          <input id="news-title" type="text" class="gem-c-input govuk-input">
        </div>

Version data entries

17 entries across 17 versions & 1 rubygems

Version Path
govuk_publishing_components-21.14.0 app/views/govuk_publishing_components/components/docs/contextual_guidance.yml
govuk_publishing_components-21.13.5 app/views/govuk_publishing_components/components/docs/contextual_guidance.yml
govuk_publishing_components-21.13.4 app/views/govuk_publishing_components/components/docs/contextual_guidance.yml
govuk_publishing_components-21.13.3 app/views/govuk_publishing_components/components/docs/contextual_guidance.yml
govuk_publishing_components-21.13.2 app/views/govuk_publishing_components/components/docs/contextual_guidance.yml
govuk_publishing_components-21.13.1 app/views/govuk_publishing_components/components/docs/contextual_guidance.yml
govuk_publishing_components-21.13.0 app/views/govuk_publishing_components/components/docs/contextual_guidance.yml
govuk_publishing_components-21.12.0 app/views/govuk_publishing_components/components/docs/contextual_guidance.yml
govuk_publishing_components-21.11.0 app/views/govuk_publishing_components/components/docs/contextual_guidance.yml
govuk_publishing_components-21.10.0 app/views/govuk_publishing_components/components/docs/contextual_guidance.yml
govuk_publishing_components-21.9.0 app/views/govuk_publishing_components/components/docs/contextual_guidance.yml
govuk_publishing_components-21.8.1 app/views/govuk_publishing_components/components/docs/contextual_guidance.yml
govuk_publishing_components-21.8.0 app/views/govuk_publishing_components/components/docs/contextual_guidance.yml
govuk_publishing_components-21.7.0 app/views/govuk_publishing_components/components/docs/contextual_guidance.yml
govuk_publishing_components-21.6.1 app/views/govuk_publishing_components/components/docs/contextual_guidance.yml
govuk_publishing_components-21.6.0 app/views/govuk_publishing_components/components/docs/contextual_guidance.yml
govuk_publishing_components-21.5.0 app/views/govuk_publishing_components/components/docs/contextual_guidance.yml