Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update guidance on conditionally revealed content and use of panels #212

Closed
wants to merge 3 commits into from
Closed

Update guidance on conditionally revealed content and use of panels #212

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4787a10
Move the link to the Hacked below the examples
gemmaleigh Apr 26, 2016
9e4b7f9
Add an example of panel usage
gemmaleigh Apr 26, 2016
0202022
Explain how the data-target attribute is used in the example
gemmaleigh Apr 26, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 36 additions & 9 deletions views/guide_form_elements.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,33 +228,54 @@ <h3 class="heading-medium" id="form-toggle-content">
</h3>
<ul class="list list-bullet text">
<li>reveal additional questions, depending on the context</li>
<li>insets are used to emphasise this supporting information</li>
<li>a left border is used to emphasise this supporting information</li>
</ul>

<p>
<a href="https://designpatterns.hackpad.com/Conditional-form-fields-powy4GQmLIx" rel="external">
Discuss conditional form fields on the design patterns Hackpad
</a>
</p>

<h4 class="heading-small" id="form-toggle-content-radios">
Radio buttons
</h4>
<p>
Click on "Yes" to see how this works.
</p>
<div class="text">
<p>
In the example below, clicking "Yes" reveals the additional field.
</p>
<p>
If you know the National Insurance number, you can enter it and if you don't, you aren't then asked to fill in an additional field.
</p>
</div>

<div class="example">
<form>
{{> form_inset_radios }}
</form>
</div>

<div class="panel panel-border-wide text">
<p>
A grey left hand border is used to visually connect the revealed content with the question above.
</p>
</div>

<pre>
<code class="language-markup">
<div class="panel panel-border-narrow"></div>
</code>
</pre>

<p>
The <a href="/typography/#typography-inset-text">inset text section</a> has more information on where and how to use panels (content with a grey left hand border).
</p>

<pre>
<code class="language-markup">
{{> form_inset_radios }}
</code>
</pre>

<p class="text">
In the code snippet above, the <code class="language-markup">data-target="example-ni-no"</code> attribute is only present on the "Yes" label, as only this option reveals the extra field.
</p>

<h4 class="heading-small" id="form-toggle-content-checkboxes">
Checkboxes
</h4>
Expand All @@ -273,6 +294,12 @@ <h4 class="heading-small" id="form-toggle-content-checkboxes">
</code>
</pre>

<p>
<a href="https://designpatterns.hackpad.com/Conditional-form-fields-powy4GQmLIx" rel="external">
Discuss conditional form fields on the design patterns Hackpad
</a>
</p>

<h3 class="heading-medium" id="examples">Examples</h3>
<ul class="list list-bullet">
<li><a href="{{site.baseurl}}/form-elements/example-form-elements/">form elements</a></li>
Expand Down