Content
-
Check out version 4
This is the previous version of SFUMATO. Check out the latest!
-
What is SFUMATO?
-
Get started
-
Color
-
Form elements
-
CSS grid
-
Helpers
-
Media
-
Media queries
-
Typography
-
Unit layouts
Forms
To assist with creating a consistent form input experience, SFUMATO provides some patterns you can follow. These patterns are not all-inclusive, but do provide a way to give users a responsive and scalable user interface for forms.
Form pattern
The overall pattern is triggered by wrapping your form inputs in a <form> tag or within a tag with a role="form" attribute.
You can use these wrappers without using SFUMATO form input styling.
These are just required before you can leverage them at all.
<form>
// Your inputs
</form>
<div role="form">
// Your inputs
</div>
Form rows
To control form row spacing, wrap rows of form inputs in a tag with a role="row" attribute.
These are not required for SFUMATO input styling.
<div role="form">
<div role="row">
// Your form inputs
</div>
</div>
Input wrappers
The final piece of the pattern is wrapping your input field tags with a tag that specifies a SFUMATO form input style attribute. Some of these wrappers work on their own, and others also require additional tags alongside the input tag (for things like validation messages and pseudo input masking).
Examples
The following are some examples of how to implement various input field wrappers.
Textbox
This example shows a simple textbox input. There are several variations, including currency, percentage, and others.
Some examples also show the use of built-in validators provided by the browser vendors as part of the HTML5 spec.
-
<div sf-textbox></span>
The contents of this wrapper will be a textbox. -
<span sf-validation-message>
Optional tag for validation or other messages. Will be hidden if empty. Changes color if the field is marked valid or invalid. -
<span sf-wrapper></span>
The content of this wrapper will be the text input field. -
<div sf-textbox {sf-valid or sf-invalid}></span>
Optional attribute to mark a field as valid or invalid, which recolors the text and lines. -
<div sf-textbox {sf-readonly}></span>
Optional attribute to mark a field as read-only.
HTML
Password
This example shows a simple password input.
-
<div sf-textbox></span>
The contents of this wrapper will be a textbox type. -
<span sf-validation-message>
Optional tag for validation or other messages. Will be hidden if empty. Changes color if the field is marked valid or invalid. -
<span sf-wrapper></span>
The content of this wrapper will be the text input field. -
<div sf-textbox {sf-valid or sf-invalid}></span>
Optional attribute to mark a field as valid or invalid, which recolors the text and lines.
HTML
Web address
This example shows a text input for web addresses (URLs).
-
<div sf-textbox></span>
The contents of this wrapper will be a textbox type. -
<span sf-validation-message>
Optional tag for validation or other messages. Will be hidden if empty. Changes color if the field is marked valid or invalid. -
<span sf-wrapper></span>
The content of this wrapper will be the text input field. -
<div sf-textbox {sf-valid or sf-invalid}></span>
Optional attribute to mark a field as valid or invalid, which recolors the text and lines.
HTML
Email address
This example shows a text input for email addresses.
-
<div sf-textbox></span>
The contents of this wrapper will be a textbox type. -
<span sf-validation-message>
Optional tag for validation or other messages. Will be hidden if empty. Changes color if the field is marked valid or invalid. -
<span sf-wrapper></span>
The content of this wrapper will be the text input field. -
<div sf-textbox {sf-valid or sf-invalid}></span>
Optional attribute to mark a field as valid or invalid, which recolors the text and lines.
HTML
Search
This example shows a text input for search widgets.
-
<div sf-textbox sf-search></span>
The contents of this wrapper will be a textbox type, search variation. -
<span sf-wrapper></span>
The content of this wrapper will be the text input field.
HTML
Numbers
This example shows a text input for various numeric values.
-
<div sf-textbox sf-currency></span>
The contents of this wrapper will be a textbox type, currency variation. A U.S. dollar sign will be added for you. You can put your own currency symbol into the emptyspan. -
<div sf-textbox sf-percentage></span>
The contents of this wrapper will be a textbox type, percentage variation. -
<div sf-textbox {sf-valid or sf-invalid}></span>
Optional attribute to mark a field as valid or invalid, which recolors the text and lines. -
<span sf-validation-message>
Optional tag for validation or other messages. Will be hidden if empty. Changes color if the field is marked valid or invalid. -
<span sf-wrapper></span>
The content of this wrapper will be the text input field.
HTML
Dates
This example shows a text input for various date/time values. Modern browsers will provide date/time pickers.
-
<div sf-textbox sf-date></span>
The contents of this wrapper will be a textbox type, date/time variation. -
<div sf-textbox {sf-valid or sf-invalid}></span>
Optional attribute to mark a field as valid or invalid, which recolors the text and lines. -
<span sf-validation-message>
Optional tag for validation or other messages. Will be hidden if empty. Changes color if the field is marked valid or invalid. -
<span sf-wrapper></span>
The content of this wrapper will be the text input field.
HTML
File upload
This example shows a simple file upload input.
-
<div sf-filebox></span>
The contents of this wrapper will be a file input. -
<span sf-validation-message>
Optional tag for validation or other messages. Will be hidden if empty. Changes color if the field is marked valid or invalid. -
<span sf-wrapper></span>
The content of this wrapper will be the text input field. -
<div sf-textbox {sf-valid or sf-invalid}></span>
Optional attribute to mark a field as valid or invalid, which recolors the text and lines.
HTML
Multiline
This example shows a simple multiline text input.
-
<div sf-textbox></span>
The contents of this wrapper will be a textbox type. -
<div sf-textbox {sf-valid or sf-invalid}></span>
Optional attribute to mark a field as valid or invalid, which recolors the text and lines. -
<div sf-textbox {sf-readonly}></span>
Optional attribute to mark a field as read-only. -
<span sf-validation-message>
Optional tag for validation or other messages. Will be hidden if empty. Changes color if the field is marked valid or invalid. -
<span sf-wrapper></span>
The content of this wrapper will be the text input field.
HTML
Select list
This example shows a select list input.
-
<div sf-listbox></span>
The contents of this wrapper will be a listbox type. -
<div sf-textbox {sf-valid or sf-invalid}></span>
Optional attribute to mark a field as valid or invalid, which recolors the text and lines. -
<span sf-validation-message>
Optional tag for validation or other messages. Will be hidden if empty. Changes color if the field is marked valid or invalid. -
<span sf-wrapper></span>
The content of this wrapper will be the select list field.
HTML
Checkboxes
This example shows a checkbox and checkbox list.
-
<div sf-checkbox></span>
The contents of this wrapper will be a checkbox type. -
<span sf-wrapper></span>
The content of this wrapper will be the checkbox field. -
<ul sf-checkboxes></span>
Defines an unordered list as a checkbox list wrapper.
Single checkbox
Checkbox list
-
Choice A (with a very, very, very, very, extremely super long label to illustrate wrapping behavior)
-
Choice B
-
Choice C
HTML
Radio lists
This example shows both horizontal and vertical radio input lists.
-
<div sf-radio></span>
The contents of this wrapper will be a radio type. -
<span sf-wrapper></span>
The content of this wrapper will be the checkbox field. -
<ul sf-radios></span>
Defines an unordered list as a radio list wrapper. -
<ul sf-radios sf-horizontal></span>
Defines a horizontal radio list.
Horizontal
Vertical
HTML