Field flow alternatives

Find styling alternatives for field flow.

Increased font size

Increases the font size of Field flow elements following visual update in 2019.

By adding the .gc-font-2019 class to your .wb-fieldflow element, you will get the same result as shown below.

Notes

If you are using Field flow with the goal of adding dynamic content to the page through AJAX (as shown in the example below) and you are hoping to get the increased font size on your injected content, you are highly recommended to use the technique shown in the advanced examples which showcases the "container" configuration and gives more details about it.
If you are using your own form element and have Field flow inside of it, as shown in the advanced examples, you can also try adding the .gc-font-2019 class to your form element as well so you can test having all (or almost all) of your form's content with increased font size.

Choose content to be ajaxed?

Set 3 - Use container: $("#ajaxPanel .panel-body")
Set 4 - Use container: $("#ajaxPanel .panel-body")

`id="ajaxPanel"` Aside panel, for example

(To illustrate container option)

<div class="wb-fieldflow gc-font-2019">
		<p>Choose content to be ajaxed?</p>
		<ul>
			<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-3.html", "container": "#ajaxPanel .panel-body"}'>Set 3 - Use container: $("#ajaxPanel .panel-body")</li>
			<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-4.html", "container": "#ajaxPanel .panel-body"}'>Set 4 - Use container: $("#ajaxPanel .panel-body")</li>
		</ul>
	</div>
	<section id="ajaxPanel" class="panel panel-primary mrgn-tp-md">
		<header class="panel-heading">
			<h3 class="panel-title"><code>id="ajaxPanel"</code> Aside panel, for example</h3>
		</header>
		<div class="panel-body">
			<p>(To illustrate <code>container</code> option)</p>
		</div>
	</section>

Larger inputs with GC Checkboxes and radio

Leverages the GC Checkboxes and radio design pattern to deliver larger inputs.

By adding the "gcChckbxrdio":true configuration to your data-wb-fieldflow data attribute, you will get the same result as shown below.

Note

This pattern will render larger text by default. You can still use the .gc-font-2019 class if you want surrounding elements to display in a larger font size, for example the submit button, as demonstrated in the Increased font size section.

Large checkboxes

Choose content to be ajaxed:

(Set 1) Nunc sed mauris id nisi molestie porta at quis erat.
(Set 2) Vestibulum pretium tortor vel facilisis sodales.
(Set 3) Nunc sit amet dui ut justo efficitur dapibus.
(Set 4) Praesent at purus ut turpis sollicitudin aliquam.
(Set 5) Sed eget dui ac nunc mattis consequat in a ex.

<div class="wb-fieldflow" data-wb-fieldflow='{"renderas":"checkbox", "gcChckbxrdio":true}'>
		<p>Choose content to be ajaxed:</p>
		<ul>
			<li data-wb-fieldflow="ajax/ajax-1.html">(Set 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
			<li data-wb-fieldflow="ajax/ajax-2.html">(Set 2) Vestibulum pretium tortor vel facilisis sodales.</li>
			<li data-wb-fieldflow="ajax/ajax-3.html">(Set 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
			<li data-wb-fieldflow="ajax/ajax-4.html">(Set 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
			<li data-wb-fieldflow="ajax/ajax-5.html">(Set 5) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> in a ex.</li>
		</ul>
	</div>

Large radio buttons

Choose content to be ajaxed:

(Set 1) Nunc sed mauris id nisi molestie porta at quis erat.
(Set 2) Vestibulum pretium tortor vel facilisis sodales.
(Set 3) Nunc sit amet dui ut justo efficitur dapibus.
(Set 4) Praesent at purus ut turpis sollicitudin aliquam.
(Set 5) Sed eget dui ac nunc mattis consequat in a ex.

<div class="wb-fieldflow" data-wb-fieldflow='{"renderas":"radio", "gcChckbxrdio":true}'>
		<p>Choose content to be ajaxed:</p>
		<ul>
			<li data-wb-fieldflow="ajax/ajax-1.html">(Set 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
			<li data-wb-fieldflow="ajax/ajax-2.html">(Set 2) Vestibulum pretium tortor vel facilisis sodales.</li>
			<li data-wb-fieldflow="ajax/ajax-3.html">(Set 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
			<li data-wb-fieldflow="ajax/ajax-4.html">(Set 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
			<li data-wb-fieldflow="ajax/ajax-5.html">(Set 5) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> in a ex.</li>
		</ul>
	</div>

Inline large checkboxes

Choose content to be ajaxed:

Set 1
Set 2
Set 3
Set 4
Set 5

<div class="wb-fieldflow" data-wb-fieldflow='{"renderas":"checkbox", "inline":true, "gcChckbxrdio":true}'>
		<p>Choose content to be ajaxed:</p>
		<ul>
			<li data-wb-fieldflow="ajax/ajax-1.html">Set 1</li>
			<li data-wb-fieldflow="ajax/ajax-2.html">Set 2</li>
			<li data-wb-fieldflow="ajax/ajax-3.html">Set 3</li>
			<li data-wb-fieldflow="ajax/ajax-4.html">Set 4</li>
			<li data-wb-fieldflow="ajax/ajax-5.html">Set 5</li>
		</ul>
	</div>

Inline large radio buttons

Choose content to be ajaxed:

Set 1
Set 2
Set 3
Set 4
Set 5

<div class="wb-fieldflow" data-wb-fieldflow='{"renderas":"radio", "inline":true, "gcChckbxrdio":true}'>
		<p>Choose content to be ajaxed:</p>
		<ul>
			<li data-wb-fieldflow="ajax/ajax-1.html">Set 1</li>
			<li data-wb-fieldflow="ajax/ajax-2.html">Set 2</li>
			<li data-wb-fieldflow="ajax/ajax-3.html">Set 3</li>
			<li data-wb-fieldflow="ajax/ajax-4.html">Set 4</li>
			<li data-wb-fieldflow="ajax/ajax-5.html">Set 5</li>
		</ul>
	</div>

`query` action, use of empty value

For individual `query` action

<div class="wb-frmvld">
	<form action="alternative-en.html" method="get">
		<div class="wb-fieldflow hidden" data-wb-fieldflow='{
			"noForm": true,
			"defaultselectedlabel": false
		}'>
			<p>Pick an option</p>
			<ul>
				<li data-wb-fieldflow='[
					{ "action": "query", "name": "q1", "value": "" }
				]'>Custom: Make your selection...</li>
				<li data-wb-fieldflow='[
					{ "action": "query", "name": "q1", "value": "opt1" }
				]'>Option 1</li>
				<li data-wb-fieldflow='[
					{ "action": "query", "name": "q1", "value": "opt2" }
				]'>Option 2</li>
			</ul>
		</div>
		<button>Submit</button>
	</form>
</div>

When the new default global action is `query`

<div class="wb-frmvld">
	<form action="alternative-en.html" method="get">
		<div class="wb-fieldflow hidden" data-wb-fieldflow='{
			"noForm": true,
			"defaultselectedlabel": false,
			"action": "query", "name": "q2", "prop": "value"
		}'>
			<p>Pick an option</p>
			<ul>
				<li data-wb-fieldflow=''>Custom: Make your selection...</li>
				<li data-wb-fieldflow='opt1'>Option 1</li>
				<li data-wb-fieldflow='opt2'>Option 2</li>
			</ul>
		</div>
		<button>Submit</button>
	</form>
</div>

With multiple actions

It can ease the code readability compare of defining it through the "default" configuration applied on the component instance.

The example bellow are only to test the functional aspect of that feature and might produce experience/code that are not fully conform to WCAG Level AA.

<div class="wb-frmvld">
	<form action="http://localhost/" method="post">
		<div class="wb-fieldflow hidden" data-wb-fieldflow='{
			"noForm": true,
			"defaultselectedlabel": false
		}'>
			<p>Pick an option</p>
			<ul>
				<li data-wb-fieldflow='[
					{ "action": "query", "name": "q3", "value": "" },
					{ "action": "addClass", "source": ".redgreen", "class": "text-danger", "live": true },
					{ "action": "removeClass", "source": ".redgreen", "class": "text-success", "live": true }
				]'>Custom: Make your selection...</li>
				<li data-wb-fieldflow='[
					{ "action": "query", "name": "q3", "value": "opt1" },
					{ "action": "addClass", "source": ".redgreen", "class": "text-success", "live": true },
					{ "action": "removeClass", "source": ".redgreen", "class": "text-danger", "live": true }
				]'>Option 1</li>
				<li data-wb-fieldflow='[
					{ "action": "query", "name": "q3", "value": "opt2" },
					{ "action": "addClass", "source": ".redgreen", "class": "text-success", "live": true },
					{ "action": "removeClass", "source": ".redgreen", "class": "text-danger", "live": true }
				]'>Option 2</li>
			</ul>
		</div>
		<p class="redgreen">Red when default option is selected <strong>or</strong> green if a real option selected.</p>
		<button>Submit</button>
	</form>
</div>

Page details

Date modified:: 2023-12-01

Language selection

Search

Field flow alternatives

Increased font size

Notes

`id="ajaxPanel"` Aside panel, for example

Larger inputs with GC Checkboxes and radio

Note

Large checkboxes

Large radio buttons

Inline large checkboxes

Inline large radio buttons

`query` action, use of empty value

For individual `query` action

When the new default global action is `query`

With multiple actions

Page details

Field flow alternatives

Increased font size

Notes

Larger inputs with GC Checkboxes and radio

Note

Large checkboxes

Large radio buttons

Inline large checkboxes

Inline large radio buttons

query action, use of empty value

For individual query action

When the new default global action is query

With multiple actions

Page details

`query` action, use of empty value

For individual `query` action

When the new default global action is `query`