To create a single checkbox, add an input with a type="checkbox" attribute and a corresponding label. Set the for attribute of the label to match the ID of the input so they are semantically associated.
+<input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom" />
+<label for="checkbox-0">I agree</label>
+ This will produce a basic checkbox. The default styles will set the width of the element to 100% of the parent container.
+ + + + + +Because checkboxes use the label element for the text displayed next to the checkbox form element, we recommend wrapping the checkbox in a fieldset element that has a legend which acts as the title for the question. Add the data-role="controlgroup" attribute to the fieldset so it can be styled in a parallel way as text inputs, selects or other form elements.
Lastly, need to wrap the fieldset in a div with data-role="controlgroup" attribute to the fieldset so it can be styled in a parallel way as text inputs, selects or other form elements.
<div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
- <legend>Agree to the terms:</legend>
- <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
- <label for="checkbox-1">I agree</label>
- </fieldset>
+ <fieldset data-role="controlgroup">
+ <legend>Agree to the terms:</legend>
+ <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
+ <label for="checkbox-1">I agree</label>
+ </fieldset>
</div>
Because radio buttons use the label element for the text displayed next to the checkbox form element, we recommend wrapping the radio buttons in a fieldset element that has a legend which acts as the title for the question.
Lastly, need to wrap the fieldset in a div with data-role="controlgroup" attribute to the fieldset so it can be styled in a parallel way as text inputs, selects or other form elements.
To visually integrate multiple radio buttons into a vertically grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a data-role="controlgroup" attribute on the container.
-<div data-role="fieldcontain">
- <fieldset data-role="controlgroup">
+<fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
+ <label for="radio-choice-1">Cat</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
+ <label for="radio-choice-2">Dog</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
+ <label for="radio-choice-3">Hamster</label>
+
+ <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
+ <label for="radio-choice-4">Lizard</label>
+</fieldset>
+This will produce a vertically grouped radio button set. The default styles set the width of the button group to 100% of the parent container and stacks the label on a separate line.
+ + + + + +
+<div data-role="fieldcontain">
+ <fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
@@ -62,28 +99,28 @@
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
-</div>
-To visually integrate multiple radio buttons into a vertically grouped button set, the framework will automatically remove all margins between buttons and round only the top and bottom corners of the set if there is a data-role="controlgroup" attribute on the fie.
Radio buttons can also be used for grouped button sets only a single button can be selected at once, such as a view switcher control. To make a horizontal radio button set, add the data-type="horizontal" to the fieldset.
The framework will float the labels so they sit side-by-side on a line, hide the radio button icons and only round the left and right edges of the group.
+The framework will float the labels so they sit side-by-side on a line, hides the radio button icons and only round the left and right edges of the group.
diff --git a/docs/forms/search/index.html b/docs/forms/search/index.html index 66635876..8808ddd4 100755 --- a/docs/forms/search/index.html +++ b/docs/forms/search/index.html @@ -35,25 +35,37 @@Search inputs are a new HTML type that is styled with pill-shaped corners and adds a "x" icon to clear the field once you start typing. Start with an input with a type="search" attribute in your markup.
Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.
Set the for attribute of the label to match the ID of the input so they are semantically associated. It's possible to accessibly hide the label if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.
+<label for="search-basic">Search Input:</label>
+<input type="search" name="search" id="searc-basic" value="" />
+ This will produce a basic search input. The default styles set the width of the input to 100% of the parent container and stacks the label on a separate line.
+ + + + +Optionally wrap the search input in a container with the data-role="fieldcontain" attribute to help visually group it in a longer form.
-<div data-role="fieldcontain">
- <label for="search">Search Input:</label>
+<div data-role="fieldcontain">
+ <label for="search">Search Input:</label>
<input type="search" name="password" id="search" value="" />
-</div>
-The search input is displayed like this:
+The search input is now displayed like this:
Themed variation:
By default, the framework leverages the native OS options menu to use with the custom button. When the button is clicked, the native OS menu will open. When a value is selected and the menu closes, the custom button's text is updated to match the selected value.
-To add a select menu to your page, start with a standard select element populated with a set of option elements. Set the for attribute of the label to match the ID of the select so they are semantically associated. Wrap them in a div with the data-role="fieldcontain" attribute to help visually group it in a longer form.
To add a select menu to your page, start with a standard select element populated with a set of option elements. Set the for attribute of the label to match the ID of the select so they are semantically associated. It's possible to accessibly hide the label if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.
The framework will find all select elements and automatically enhance them into select menus, no need to apply a data-role attribute. To prevent the automatic enhancement of a select, add data-role="none" attribute to the select.
+<label for="select-choice-0" class="select">Shipping method:</label>
+<select name="select-choice-0" id="select-choice-1">
+ <option value="standard">Standard: 7 day</option>
+ <option value="rush">Rush: 3 days</option>
+ <option value="express">Express: next day</option>
+ <option value="overnight">Overnight</option>
+</select>
+ The framework will find all select elements and automatically enhance them into select menus. The markup for a select grouped in a field container:
This will produce a basic select menu. The default styles set the width of the input to 100% of the parent container and stacks the label on a separate line.
+ + + + +Optionally wrap the selects in a container with the data-role="fieldcontain" attribute to help visually group it in a longer form.
-<div data-role="fieldcontain">
- <label for="select-choice-1" class="select">Shipping method:</label>
+<div data-role="fieldcontain">
+ <label for="select-choice-1" class="select">Shipping method:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
-</div>
-produces this select menu:
+The select input is now displayed like this:
To add a slider widget to your page, use a standard input with the type="range" attribute. The input's value is used to configure the starting position of the handle and the value populated in the text input. Specify min and max attribute values to set the slider's range. The framework will parse these attributes to configure the slider widget.
As you drag the slider's handle, the framework will update the native input's value (and vice-versa) so they are always in sync; this ensures that the value is submitted with the form.
-Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.
Set the for attribute of the label to match the ID of the input so they are semantically associated. It's possible to accessibly hide the label if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.
The framework will find all inputs elements with a type="range" and automatically enhance them into a slider with an accompanying input, no need to apply a data-role attribute. To prevent the automatic enhancement of this input into a slider, add data-role="none" attribute to the input.
div with the data-role="fieldcontain" attribute to group them.
+
-<div data-role="fieldcontain">
- <label for="slider">Input slider:</label>
- <input type="range" name="slider" id="slider" value="25" min="0" max="100" />
-</div>
+ <label for="slider-0">Input slider:</label>
+ <input type="range" name="slider" id="slider-0" value="25" min="0" max="100" />
The default slider is displayed like this:
+The default slider is displayed like this:
+ + + +Optionally wrap the slider markup in a container with the data-role="fieldcontain" attribute to help visually group it in a longer form.
+<div data-role="fieldcontain">
+ <label for="slider">Input slider:</label>
+ <input type="range" name="slider" id="slider" value="25" min="0" max="100" />
+</div>
+The slider is now be is displayed like this:
Sliders also respond to key commands. Right Arrow, Up Arrow, and Page Up keys increase the value; Left Arrow, Down Arrow, and Page Down keys decrease it. To move the slider to its minimum or maximum value, use the Home or End key, respectively.
@@ -61,6 +75,22 @@ $('input').slider(); + +To set the theme swatch for the slider, add a data-theme attribute to the input which will apply the theme to both the input, handle and track. The track swatch can be set separately by adding the data-track-theme attribute to apply the down state version of the selected button swatch.
+<div data-role="fieldcontain">
+ <label for="slider-2">Input slider:</label>
+ <input type="range" name="slider-2" id="slider-1" value="25" min="0" max="100" data-theme="a" data-track-theme="b" />
+</div>
+ This will produce a themed slider:
+A binary "flip" switch is a common UI element on mobile devices that is used for binary on/off or true/false data input. You can either drag the flip handle like a slider or tap one side of the switch.
-To create a flip toggle, start with a select with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options accordingly. Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.
To create a flip toggle, start with a select with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options accordingly.
Set the for attribute of the label to match the ID of the input so they are semantically associated. It's possible to accessibly hide the label if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.
-<div data-role="fieldcontain">
- <label for="slider">Select slider:</label>
- <select name="slider" id="slider" data-role="slider">
- <option value="off">Off</option>
- <option value="on">On</option>
- </select>
-</div>
+<label for="flip-a">Select slider:</label>
+<select name="slider" id="flip-a" data-role="slider">
+ <option value="off">Off</option>
+ <option value="on">On</option>
+</select>
The flip toggle switch is displayed like this:
-