5 forms Forms
Forms are used throughout the system and can be arranged in several ways. The following is an example of how various components are combined.
../kitsune/sumo/static/sumo/scss/base/forms/_fields.scss, line 13
5.1 forms.field Input fields
Help text can be added under the field with <p class="help-text"> Help text
should be be tied to the form field using the aria-describedby attribute and
an ID. This will ensure that screen readers—will announce the help text when
the user focuses the field.
This is the error text
This is help text
disabled should also be applied as an attribute to the field itself.
This is the error text
This is help text
This is the error text
This is help text
This is the error text
This is help text
This is the error text
This is help text
Markup: ../../../../../styleguide/styleguide-examples/field.njk
<div class="field ">
<label for="example_1">Your Name</label>
<div class="field-wrap">
<input
type="text"
id="example_1"
placeholder="Red Panda"
aria-describedby="id_help_example_1"
value=""
/>
</div>
<p class="error-text">This is the error text</p>
<p class="help-text" id="id_help_example_1">This is help text</p>
</div>
../kitsune/sumo/static/sumo/scss/base/forms/_fields.scss, line 37
This is help text
disabled should also be applied as an attribute to the field itself.
This is help text
This is help text
This is help text
This is help text
Markup: ../../../../../styleguide/styleguide-examples/field_select.njk
<div class="field ">
<label for="example_1">State</label>
<select id="example_2" aria-describedby="id_help_example_2"
>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
</select>
<p class="help-text" id="id_help_example_2">This is help text</p>
</div>
../kitsune/sumo/static/sumo/scss/base/forms/_fields.scss, line 279
disabled should also be applied as an attribute to the field itself.
Markup: ../../../../../styleguide/styleguide-examples/field_textarea.njk
<div class="field ">
<label for="example_1">Comments</label>
<div class="field-wrap">
<textarea ></textarea>
</div>
</div>
../kitsune/sumo/static/sumo/scss/base/forms/_fields.scss, line 331
disabled should also be applied as an attribute to the field itself.
Markup: ../../../../../styleguide/styleguide-examples/field_checkbox.njk
<div class="field checkbox ">
<input
type="checkbox"
id="id_example_checkbox_1_"
/>
<label for="id_example_checkbox_1_">I agree to the terms of service</label>
</div>
<div class="field checkbox ">
<input
type="checkbox"
id="id_example_checkbox_2_"
checked
/>
<label for="id_example_checkbox_2_">This is a checked example</label>
</div>
../kitsune/sumo/static/sumo/scss/base/forms/_radios-checkboxes.scss, line 4
disabled should also be applied as an attribute to the field itself.
Markup: ../../../../../styleguide/styleguide-examples/field_radio.njk
<div class="field radio ">
<input
type="radio"
id="id_example_radio_1_"
name="radio group example "
value="Apples"
/>
<label for="id_example_radio_1_">Apples</label>
</div>
<div class="field radio ">
<input
type="radio"
id="id_example_radio_2_"
name="radio group example "
value="Oranges"
checked="checked"
/>
<label for="id_example_radio_2_">Oranges</label>
</div>
<div class="field radio ">
<input
type="radio"
id="id_example_radio_3_"
name="radio group example "
value="Peaches"
/>
<label for="id_example_radio_3_">Peaches</label>
</div>
../kitsune/sumo/static/sumo/scss/base/forms/_radios-checkboxes.scss, line 102
5.6 forms.toggle Toggles
The following classes can be applied to either checkboxes or radio groups to build toggles. Toggles are used to convey boolean status of a field. While they won't always replace checkboxes, they can be used in special cases.
NOTE: Toggles are not as clear as checkboxes, so we should use these sparingly.
disabled should also be applied as an attribute to the field itself.
Markup: ../../../../../styleguide/styleguide-examples/field_toggle.njk
<div class="field toggle ">
<input
type="checkbox"
id="id_example_toggle_1_"
value="Apples"
/>
<label for="id_example_toggle_1_">Apples</label>
</div>
<div class="field toggle ">
<input
type="checkbox"
id="id_example_toggle_2_"
value="Oranges"
checked="checked"
/>
<label for="id_example_toggle_2_">Oranges</label>
</div>
<div class="field toggle ">
<input
type="checkbox"
id="id_example_toggle_3_"
name="toggle group example "
value="Peaches"
/>
<label for="id_example_toggle_3_">Peaches</label>
</div>
../kitsune/sumo/static/sumo/scss/base/forms/_toggles.scss, line 4
5.7 forms.range Range inputs
This component requires a good bit of non-standard vendor-specific selectors for this to work cross-browser. See this blog post at CSS tricks for more details.
disabled should also be applied as an attribute to the field itself.
Markup: ../../../../../styleguide/styleguide-examples/field_range.njk
<div class="field ">
<label for="example_1">Range input</label>
<div class="field-wrap">
<input
type="range"
id="example_1"
/>
</div>
</div>
../kitsune/sumo/static/sumo/scss/base/forms/_range.scss, line 4
5.8 forms.help-text Help Text
Help text can be added under the field with <p class="help-text"> Help text
should be be tied to the form field using the aria-describedby attribute and
an ID. This will ensure that screen readers—will announce the help text when
the user focuses the field.
This is help text
Markup: ../../../../../styleguide/styleguide-examples/field_help_text.njk
<div class="field ">
<label for="example_1">Your Name</label>
<div class="field-wrap">
<input
type="text"
id="example_1"
placeholder="Red Panda"
aria-describedby="id_help_example_1"
value=""
/>
</div>
<p class="help-text" id="id_help_example_1">This is help text</p>
</div>
../kitsune/sumo/static/sumo/scss/base/forms/_fields.scss, line 349