Sha256: 44f29a5b9e4776206df6c077316a2f00bb2fa7ba8fe4382a41c616dff9f94523
Contents?: true
Size: 1.49 KB
Versions: 28
Compression:
Stored size: 1.49 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
uses_component_wrapper_helper: true
shared_accessibility_criteria:
- link
examples:
default:
description: Reveals a contextual guidance on the side overflowing the container
data:
html_for: news-title
title: Writing a news title
guidance_id: news-title-guidance
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: |
<!-- example content -->
<%= render "govuk_publishing_components/components/input", {
label: {
text: "News title"
},
name: "news-title",
id: "news-title",
describedby: "news-title-guidance"
}
%>
<!-- end of example content -->
Version data entries
28 entries across 28 versions & 1 rubygems