Table of contents

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.

Yes, I agree
                                        
                                        
                                    

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.

You're good to go!
There is a problem with this field

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.

You're good to go!
There is a problem with your input.

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.

You're good to go!
There is a problem with your input.

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.

You're good to go!
There is a problem with your input.

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 empty span.
  • <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

Choice A (with a very, very, very, very, extremely super long label to illustrate wrapping behavior)

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

                                    
                                

Buttons

This example shows various ways to create buttons.

  • <input type="button|submit|cancel"></span>
    <button></span>
    <a role="button"></span>
    Styled as a button.
  • <... disabled></span>
    Style as a disabled button.

anchor; role=button

HTML