Skip to content
This repository has been archived by the owner. It is now read-only.

Add checkbox and radio form toggles #90

Merged
merged 3 commits into from Oct 26, 2015
Merged

Add checkbox and radio form toggles #90

merged 3 commits into from Oct 26, 2015

Conversation

@fofr
Copy link
Contributor

@fofr fofr commented Oct 16, 2015

Create a checkbox toggle and a radio toggle so that content can be conditionally revealed and forms simplified.

The JS is derived from GOV.UK elements patterns, setting aria controls and aria hidden attributes dynamically. A checkbox and a toggle target are linked together with an ID. http://govuk-elements.herokuapp.com/form-elements/#form-toggle-content

The modules check the current state of the form and then hide or show content accordingly. All content is displayed when JS is disabled.

This is a pattern many apps are already using, but the JS is usually bespoke and inaccessible.

For an example of usage, see https://github.com/alphagov/whitehall/compare/toggle-form-fields

radio-checkbox-toggling

cc @gemmaleigh @alextea

fofr added 3 commits Oct 16, 2015
Create a checkbox toggle so that content can be conditionally revealed
and forms simplified.

The JS is based on GOV.UK elements patterns, setting aria controls and
aria hidden attributes dynamically. A checkbox and a toggle target are
linked with an ID.

The module checks the current state of the form and then hides or shows
content based on that.
Use a single module to handle the toggling and targets of multiple
checkboxes. Each checkbox should define a target.
Create a radio toggle so that content can be conditionally revealed
and forms simplified.

The JS is based on GOV.UK elements patterns, setting aria controls and
aria hidden attributes dynamically. A radio and a toggle target are
linked with an ID.

The module checks the current state of the form and then hides or shows
content based on that.

The radio example is a little more convoluted than the checkbox
equivalent. It needs to listen for changes to all radio elements with
the same name – when one radio is selected there is no corresponding
change event on the others.

function toggle() {
var state = $checkbox.is(':checked');
$target.toggle(state);

This comment has been minimized.

@alextea

alextea Oct 16, 2015

clever! 👍

@alextea
Copy link

@alextea alextea commented Oct 16, 2015

This looks good. How can I preview it?

@dsingleton
Copy link
Contributor

@dsingleton dsingleton commented Oct 23, 2015

LGTM. If it's not a huge pain it'd be worth rebasing the rename out of history to keep the commits clean, but it's not a blocker, i'd be happy to merge as is. Up to you :)

@alextea to test/preview I ran the gem locally and checked 0.0.0.0:3000/style-guide, which had examples (which is a really nice feature, good work @fofr)

benlovell added a commit that referenced this pull request Oct 26, 2015
Add checkbox and radio form toggles
@benlovell benlovell merged commit 002cdf3 into master Oct 26, 2015
1 check passed
1 check passed
@govuk-ci
default "Build #133 succeeded on Jenkins"
Details
@benlovell benlovell deleted the more-elements branch Oct 26, 2015
fofr added a commit that referenced this pull request Oct 26, 2015
* Add checkbox and radio form toggles:
#90
fofr added a commit to alphagov/govuk_frontend_toolkit that referenced this pull request Nov 11, 2015
Pull checkbox toggle from govuk_admin_template:
alphagov/govuk_admin_template#90

Create a checkbox toggle so that content can be conditionally revealed
and forms simplified.

The JS is based on GOV.UK elements patterns, setting aria controls and
aria hidden attributes dynamically. A checkbox and a toggle target are
linked with an ID.

The module checks the current state of the form and then hides or shows
content based on that.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

4 participants