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
scrollable

Form pattern

The overall pattern is triggered by wrapping your form inputs in a <form> tag or within a tag with a sf-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 sf-form>
                                                    // Your inputs
                                                </div>
scrollable

Form rows

To control form row spacing, wrap rows of form inputs in a tag with a sf-row attribute. These are not required for SFUMATO input styling. This is a shortcut method for spacing form rows without using a CSS grid. 

                                            
                                                <div sf-form>
                                                    <div sf-row>
                                                        // Your form inputs                                    
                                                    </div>
                                                </div>
scrollable

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
scrollable

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
scrollable

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
scrollable

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
scrollable

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
scrollable

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
scrollable

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
scrollable

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
scrollable

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
scrollable

Toggle Switches

This example shows a single toggle switch and a toggle switch list.

  • <div sf-toggle></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-toggles></span>
    Defines an unordered list as a checkbox list wrapper.

Single switch

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

Toggle switch list

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

HTML
scrollable

Checkboxes

This example shows a single checkbox and a 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.
Choice A (with a very, very, very, very, extremely super long label to illustrate wrapping behavior)
  • Choice A (with a very, very, very, very, extremely super long label to illustrate wrapping behavior)
  • Choice B
  • Choice C

HTML
scrollable

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
scrollable

Buttons

This example shows various ways to create buttons.

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

HTML
scrollable