Hudl Design System

Last Modified:October 7, 2016

Forms

Uniform-UI provides basic inputs, checkboxes and radios to be used in forms within Hudl. There are contextual variations including theme, size (small, medium and large) and density (standard and compact). Learn more about the design philosophy behind these form elements.

Using the React Component

Unless you’re planning to handcode forms, the coolest, easiest way to use this CSS is to use Forms components from Uniform-UI-Components. We’ve taken pains to ensure the code output with each component is semantic and has accessibility wins.

You’ll want to ensure your cluster is ready to use uniform-ui-css and ready to use uniform-ui-components. If you’re a designer, these steps might not make sense, but a developer on your squad will know what to do.

Creating more semantic and accessible forms

With the release of these form elements, our goal has been to provide you with the best semantic and accessible form elements we can provide. You might notice there’s a lot of gobbledygook within these examples. We promise there’s a reason. Here’s a quick rundown of what’s going on here.

  1. <label for="text1">This is a label</label>

    Labels are important. Even if you don’t want users to see them, a <label> is very important to our customers who might be using some sort of assistive technology. If you do want to hide your label, the best method is to use the u-sr-only class. This will hide the label visually, but still makes it available for assistive technologies.

    The for="text1" is the magic that helps tie this label to the input. If the input has `id=”text1”, assistive technologies will know what to do.

  2. <input type="text" aria-describedby="text1Help">

    Input types are explained in more detail below, but you might be asking ‘what is this aria-describedby business. That attribute helps tie the input to the optional help message described next.

  3. <p class="uni-form__help-message" id="text1Help">

    This is optional. Only use this in cases when there’s the need to provide additional instructions or help to our users. If you do use a help message, you’ll want to add the aria-describedby on the input the help messaged described, as well as add an id on the help message itself.

Using the correct Input types

We currently offer support for the following input types [ text, password, email, number, date, time, url and telephone]. Additionally, we also have support for the textarea element.

It’s important to use proper input types for inputs for a couple reasons. First, browsers apply certain behaviors to inputs depending upon which type attribtue is specified. Secondly, mobile web users will get the correspondingly appropriate keyboard type, as they click into a given input.

# Input Text

Use a text input for form fields that require users to enter text. If a user is entering a password, url or email, there are correspondingly more appropriate input types described below.

This optional helper text provides additional guidance

<!-- Input Text -->
<div class="uni-form__item l-grid__item   ">
  <label class="uni-form__label" for="text1">This is a label</label>
  <div class="uni-form__control">
  <input type="text" class="uni-form__input" id="text1" aria-describedby="text1Help" placeholder="Enter your name here"   >
  </div>
  <p class="uni-form__help-message" id="text1Help">This optional helper text provides additional guidance</p>
</div>

Uniform-UI-Component

Documentation →

<InputText placeholder="Enter your name here"/>

# Input Password

Use the password input type when users are required to enter their account password.

This optional helper text provides additional guidance

<!-- Input Password  -->
<div class="uni-form__item l-grid__item   ">
  <label class="uni-form__label" for="password1">This is a label</label>
  <div class="uni-form__control">
  <input type="password" class="uni-form__input" id="password1" aria-describedby="password1Help" placeholder="Enter your password
"   >
  </div>
  <p class="uni-form__help-message" id="password1Help">This optional helper text provides additional guidance</p>
</div>

Uniform-UI-Component

Documentation →

<InputPassword placeholder="Enter your password"/>

# Input Email

The email input is for instances where a user is required to enter an email

This optional helper text provides additional guidance

<!-- Input Email -->
<div class="uni-form__item l-grid__item   ">
  <label class="uni-form__label" for="email1">This is a label</label>
  <div class="uni-form__control">
  <input type="email" class="uni-form__input" id="email1" aria-describedby="email1Help" placeholder="Enter your email address
"   >
  </div>
  <p class="uni-form__help-message" id="email1Help">This optional helper text provides additional guidance</p>
</div>

Uniform-UI-Component

Documentation →

<InputEmail placeholder="Enter your email address"/>

# Input Number

Use this when the user is expect to enter a number. If that number is a date, time or telephone, there are more appropriate input types to use.

This optional helper text provides additional guidance

<!-- Input Number -->
<div class="uni-form__item l-grid__item   ">
  <label class="uni-form__label" for="number1">This is a label</label>
  <div class="uni-form__control">
  <input type="number" class="uni-form__input" id="number1" aria-describedby="number1Help" placeholder="Enter your age
"   >
  </div>
  <p class="uni-form__help-message" id="number1Help">This optional helper text provides additional guidance</p>
</div>

Uniform-UI-Component

Documentation →

<InputNumber placeholder="Enter your age"/>

# Input Date

Use the date input when the user is expected to enter a date

This optional helper text provides additional guidance

<!-- Input Date -->
<div class="uni-form__item l-grid__item   ">
  <label class="uni-form__label" for="date1">This is a label</label>
  <div class="uni-form__control">
  <input type="date" class="uni-form__input--date" id="date1" aria-describedby="date1Help" placeholder="Enter your birthday"   >
  </div>
  <p class="uni-form__help-message" id="date1Help">This optional helper text provides additional guidance</p>
</div>

Uniform-UI-Component

Documentation →

<InputDate placeholder="Enter your birthday"/>

# Input Time

Use the input time input when the user is expected to enter the time of day.

This optional helper text provides additional guidance

<!-- Input Time  -->
<div class="uni-form__item l-grid__item">
  <label class="uni-form__label" for="time1">This is a label</label>
  <div class="uni-form__control">
  <input type="time" class="uni-form__input--time" id="time1" aria-describedby="time1Help" placeholder="Enter the time of the game">
  </div>
  <p class="uni-form__help-message" id="time1Help">This optional helper text provides additional guidance</p>
</div>

Uniform-UI-Component

Documentation →

<InputTime placeholder="Enter the time of the game"/>

# Input URL

Use the URL input when the user is expected to enter a url.

This optional helper text provides additional guidance

<!-- Input Url -->
<div class="uni-form__item l-grid__item   ">
  <label class="uni-form__label" for="url1">This is a label</label>
  <div class="uni-form__control">
  <input type="url" class="uni-form__input" id="url1" aria-describedby="url1Help" placeholder="Enter your website
"   >
  </div>
  <p class="uni-form__help-message" id="url1Help">This optional helper text provides additional guidance</p>
</div>

Uniform-UI-Component

Documentation →

<InputUrl placeholder="Enter your website"/>

# Input Telephone

Use the telephone input when the user is expected to enter a telephone

This optional helper text provides additional guidance

<!-- Input Telephone -->
<div class="uni-form__item l-grid__item   ">
  <label class="uni-form__label" for="telephone1">This is a label
    <span class="uni-form__required">(required)</span>
  </label>
  <div class="uni-form__control">
  <input type="tel" class="uni-form__input" id="telephone1" aria-describedby="telephone1Help" placeholder="Enter your telephone
" required  >
  </div>
  <p class="uni-form__help-message" id="telephone1Help">This optional helper text provides additional guidance</p>
</div>

Uniform-UI-Component

Documentation →

<InputTel placeholder="Enter your telephone number"/>

# Text area

Use the textarea when the user is entering multiple lines of text.

Help text is here

<!-- Textarea -->
<div class="uni-form__item l-grid__item">
<label class="uni-form__label" for="textarea">Label is here</label>
<div class="uni-form__control">
<textarea class="uni-form__textarea" id="textarea" aria-describedby="textareaHelp">Write your life story ... </textarea>
</div>
<p class="uni-form__help-message" id="textareaHelp">Help text is here</p>
</div>

Uniform-UI-Component

Documentation →

<Textarea placeholder="Enter your life story"/>

# Select

The select element used in conjunction with options should be used when users are selecting one of the available options

Help text is here

<!-- Select -->
<div class="uni-form__item l-grid__item">
<label class="uni-form__label" for="textarea">Label is here</label>
<div class="uni-form__control--select">
  <select class="uni-form__select" aria-label="What is your favorite TV Show?">
    <option class="uni-form__option">Fargo</option>
    <option class="uni-form__option">The Office</option>
    <option class="uni-form__option">Parks and Rec</option>
  </select>
</div>
<p class="uni-form__help-message" id="textareaHelp">Help text is here</p>
</div>

Uniform-UI-Component

Documentation →

<Select label="How many marriages has Vincent Hanna's character been in?" defaultValue="2" required>
  <option value="2"> 2 </option>
  <option value="3"> 3 </option>
  <option value="4"> 4 </option>
</Select>

# Checkbox

A single checkbox is for instances when the user is clicking to confirm something. (e.g. I have read the terms of service)

<!-- Checkbox -->
<div class="uni-form__check-item">
  <label class="uni-form__label--check" for="check1">
    <input class="uni-form__input--check" type="checkbox" id="check1">
    <span class="uni-form__indicator--check"></span>
    Words go here with words here
  </label>
</div>

Uniform-UI-Component

Documentation →

<Checkbox label="Words go here"/>

# Checkbox group

A check group is used to wrap multiple checkboxes. Within a check group, a user can select as many of the available options as they want or need to check.

The header for the group

<!-- Checkbox Group -->
<div class="uni-form__item">
<fieldset class="uni-form__check-group">
<h4 class="uni-form__check-header">The header for the group</h4>
<div class="uni-form__check-item">
  <label class="uni-form__label--check" for="check2">
    <input class="uni-form__input--check" type="checkbox" id="check2">
    <span class="uni-form__indicator--check"></span>
    1 Words go here with words here
  </label>
</div>
<div class="uni-form__check-item">
  <label class="uni-form__label--check" for="check3">
    <input class="uni-form__input--check" type="checkbox" id="check3">
    <span class="uni-form__indicator--check"></span>
    2 Words go here with words here
  </label>
</div>
</fieldset>
</div>

Uniform-UI-Component

Documentation →

<CheckboxGroup header="The header for the group">
  <Checkbox label="First checkbox" value="first"/>
  <Checkbox label="Second checkbox" value="second"/>
</CheckboxGroup>

# Radio group

A radio group is used to wrap multiple radios. Within a radio group, a user can select only one of the options, clicking on a second option with deselect the original choice.

The header for the group

<!-- Radio Group -->
<div class="uni-form__item">
<fieldset class="uni-form__radio-group">
<h4 class="uni-form__radio-header">The header for the group</h4>
<div class="uni-form__radio-item">
  <label class="uni-form__label--radio" for="radio2">
  <input class="uni-form__input--radio" type="radio" id="radio2" name="radio">
  <span class="uni-form__indicator--radio"></span>
  1 Words go here with words here
</label>
</div>
<div class="uni-form__radio-item">
<label class="uni-form__label--radio" for="radio3">
  <input class="uni-form__input--radio" id="radio3" name="radio" type="radio">
  <span class="uni-form__indicator--radio"></span>
    2 Words go here with words here
</label>
</div>
</fieldset>
</div>

Uniform-UI-Component

Documentation →

<RadioGroup header="The header for the radio group">
  <Radio label="First radio" value="1"/>
  <Radio label="Second radio" value="2"/>
</RadioGroup>

# Disabled State

In cases where an input needs to be disabled, simply add the disabled attribute to the input itself as well as the class uni-form__item--is-disabled to that input's parent element. All inputs are wrapped in a parent element with the class of uni-form__item, so you're adding that additional modifier to that parent.

This optional helper text provides additional guidance

<!-- Disabled State -->
<div class="uni-form__item uni-form__item--is-disabled">
<div class="uni-form__check-item">
  <label class="uni-form__label--check" for="checkDisabled">
    <input class="uni-form__input--check" type="checkbox" id="checkDisabled" disabled>
    <span class="uni-form__indicator--check"></span>
    1 Words go here with words here
  </label>
</div>
</div>
<div class="uni-form__item l-grid__item  uni-form__item--is-disabled  ">
  <label class="uni-form__label" for="textx">This is a label</label>
  <div class="uni-form__control">
  <input type="text" class="uni-form__input" id="textx" aria-describedby="textxHelp" placeholder="Enter your name here"  disabled >
  </div>
  <p class="uni-form__help-message" id="textxHelp">This optional helper text provides additional guidance</p>
</div>

# Error State

In cases where an input is in an error state, simply add the invalid attribute to the input itself as well as the class uni-form__item--is-error to that input's parent element. All inputs are wrapped in a parent element with the class of uni-form__item, so you're adding that additional modifier to that parent.

This optional helper text provides additional guidance

<!-- Error State -->
<div class="uni-form__item uni-form__item--is-error">
<div class="uni-form__check-item">
  <label class="uni-form__label--check" for="checkError">
    <input class="uni-form__input--check" type="checkbox" id="checkError" invalid>
    <span class="uni-form__indicator--check"></span>
    1 Words go here with words here
  </label>
</div>
</div>
<div class="uni-form__item l-grid__item   uni-form__item--is-error ">
  <label class="uni-form__label" for="textx">This is a label</label>
  <div class="uni-form__control">
  <input type="text" class="uni-form__input" id="textx" aria-describedby="textxHelp" placeholder="Enter your name here"    invalid >
  </div>
  <p class="uni-form__help-message" id="textxHelp">This optional helper text provides additional guidance</p>
</div>

# Required Fields

In cases where an individual input is required, simply add the required attribute to the input itself as well as the class the span shown below. This serves as a visual indicator to the user.

This optional helper text provides additional guidance

<!-- Required -->
<div class="uni-form__item l-grid__item   ">
  <label class="uni-form__label" for="textRequired">This is a label
    <span class="uni-form__required">(required)</span>
  </label>
  <div class="uni-form__control">
  <input type="text" class="uni-form__input" id="textRequired" aria-describedby="textRequiredHelp" placeholder="Enter your name here" required  >
  </div>
  <p class="uni-form__help-message" id="textRequiredHelp">This optional helper text provides additional guidance</p>
</div>

Uniform-UI-Component

Documentation →

<InputText placeholder="Enter your name" required/>

# Size Variations

Form inputs are sized to sit nicely along their corresponding buttons size cousins. By default forms medium. If you want to change the size, you'll need to add a parent modifier class to a parent element. The additional uni-spacer--large--top classes are added purely for this demostration

This optional helper text provides additional guidance

This optional helper text provides additional guidance

This optional helper text provides additional guidance

<!-- Small -->
<div class="uni-form--small">
<div class="uni-form__item l-grid__item   ">
  <label class="uni-form__label" for="textRequired">This is a label
    <span class="uni-form__required">(required)</span>
  </label>
  <div class="uni-form__control">
  <input type="text" class="uni-form__input" id="textRequired" aria-describedby="textRequiredHelp" placeholder="Enter your name here" required  >
  </div>
  <p class="uni-form__help-message" id="textRequiredHelp">This optional helper text provides additional guidance</p>
</div>
</div>

<!-- Medium -->
<div class="uni-form--medium uni-spacer--large--top">
<div class="uni-form__item l-grid__item   ">
  <label class="uni-form__label" for="textRequired">This is a label
    <span class="uni-form__required">(required)</span>
  </label>
  <div class="uni-form__control">
  <input type="text" class="uni-form__input" id="textRequired" aria-describedby="textRequiredHelp" placeholder="Enter your name here" required  >
  </div>
  <p class="uni-form__help-message" id="textRequiredHelp">This optional helper text provides additional guidance</p>
</div>
</div>

<!-- Large -->
<div class="uni-form--large uni-spacer--large--top">
<div class="uni-form__item l-grid__item   ">
  <label class="uni-form__label" for="textRequired">This is a label
    <span class="uni-form__required">(required)</span>
  </label>
  <div class="uni-form__control">
  <input type="text" class="uni-form__input" id="textRequired" aria-describedby="textRequiredHelp" placeholder="Enter your name here" required  >
  </div>
  <p class="uni-form__help-message" id="textRequiredHelp">This optional helper text provides additional guidance</p>
</div>
</div>

Uniform-UI-Component

Documentation →

<FormModifier size="small">
  <InputText placeholder="Enter your name"/>
  <InputText placeholder="Enter your favorite ice cream"/>
</FormModifier>

# Theme Variations

As with the uniform type system, forms are built to automatically switch to the corresponding styles when uni-env--dark is present on a parent element. Additionally, you'll want to use one of the Level classes as well. The additional uni-pad--medium class is added purely for this demostration, but you probably will want to add some padding between the background and content in real life.

This optional helper text provides additional guidance

<!-- Level 0 -->
<div class="uni-env--dark">
  <div class="uni-form--small uni-pad--medium uni-bg--level0">
  <div class="uni-form__item l-grid__item   ">
  <label class="uni-form__label" for="textRequired">This is a label
    <span class="uni-form__required">(required)</span>
  </label>
  <div class="uni-form__control">
  <input type="text" class="uni-form__input" id="textRequired" aria-describedby="textRequiredHelp" placeholder="Enter your name here" required  >
  </div>
  <p class="uni-form__help-message" id="textRequiredHelp">This optional helper text provides additional guidance</p>
</div>
  </div>
</div>

Uniform-UI-Component

Documentation →

<FormModifier size="small" theme="ink"/>

# Form Density

The spacing between elements within a form can be adjusted by adding a density modifier class to a parent element. Currently, there are two available densities [ standard, compact ]. By default, forms have standard density. The additional uni-spacer--xxlarge--top class is added purely for this demostration.

This optional helper text provides additional guidance

This optional helper text provides additional guidance

This optional helper text provides additional guidance

This optional helper text provides additional guidance

<!-- Compact -->
<div class="uni-form--compact">
<div class="uni-form__item l-grid__item   ">
  <label class="uni-form__label" for="textcompact">This is a label
    <span class="uni-form__required">(required)</span>
  </label>
  <div class="uni-form__control">
  <input type="text" class="uni-form__input" id="textcompact" aria-describedby="textcompactHelp" placeholder="Enter your name here" required  >
  </div>
  <p class="uni-form__help-message" id="textcompactHelp">This optional helper text provides additional guidance</p>
</div>
<div class="uni-form__item l-grid__item   ">
  <label class="uni-form__label" for="textcompact2">This is a label
    <span class="uni-form__required">(required)</span>
  </label>
  <div class="uni-form__control">
  <input type="text" class="uni-form__input" id="textcompact2" aria-describedby="textcompact2Help" placeholder="Enter your name here" required  >
  </div>
  <p class="uni-form__help-message" id="textcompact2Help">This optional helper text provides additional guidance</p>
</div>
</div>

<!-- Standard -->
<div class="uni-form--standard uni-spacer--xxlarge--top">
<div class="uni-form__item l-grid__item   ">
  <label class="uni-form__label" for="textstandard">This is a label
    <span class="uni-form__required">(required)</span>
  </label>
  <div class="uni-form__control">
  <input type="text" class="uni-form__input" id="textstandard" aria-describedby="textstandardHelp" placeholder="Enter your name here" required  >
  </div>
  <p class="uni-form__help-message" id="textstandardHelp">This optional helper text provides additional guidance</p>
</div>
<div class="uni-form__item l-grid__item   ">
  <label class="uni-form__label" for="textstandard2">This is a label
    <span class="uni-form__required">(required)</span>
  </label>
  <div class="uni-form__control">
  <input type="text" class="uni-form__input" id="textstandard2" aria-describedby="textstandard2Help" placeholder="Enter your name here" required  >
  </div>
  <p class="uni-form__help-message" id="textstandard2Help">This optional helper text provides additional guidance</p>
</div>
</div>

Uniform-UI-Component

Documentation →

<FormModifier density="compact">
  <InputText placeholder="Enter your name"/>
  <InputText placeholder="Enter you favorite ice cream"/>
</FormModifier>

# Form Section

Use sections for forms where you need to divide portions of a form into thematic groupings, such Basic Information, Academic Information and Contact Information. If one uni-form__section follows another, there will automatically be a rule between the two sections.

This is a section header

This optional helper text provides additional guidance

This optional helper text provides additional guidance

This is another section header

This optional helper text provides additional guidance

This optional helper text provides additional guidance

<!-- Section -->
<div class="uni-form__section">
  <fieldset>
  <legend class="uni-form__section-header">This is a section header</legend>
<div class="uni-form__item l-grid__item   ">
  <label class="uni-form__label" for="text1">This is a label</label>
  <div class="uni-form__control">
  <input type="text" class="uni-form__input" id="text1" aria-describedby="text1Help" placeholder="Enter your name here"   >
  </div>
  <p class="uni-form__help-message" id="text1Help">This optional helper text provides additional guidance</p>
</div>
<div class="uni-form__item l-grid__item   ">
  <label class="uni-form__label" for="text1">This is a label</label>
  <div class="uni-form__control">
  <input type="text" class="uni-form__input" id="text1" aria-describedby="text1Help" placeholder="Enter your job e.g. Ditch Digger"   >
  </div>
  <p class="uni-form__help-message" id="text1Help">This optional helper text provides additional guidance</p>
</div>
</fieldset>
</div>

<!-- Another Section -->
<div class="uni-form__section">
  <fieldset>
  <legend class="uni-form__section-header">This is another section header</legend>
<div class="uni-form__item l-grid__item   ">
  <label class="uni-form__label" for="text1">This is a label</label>
  <div class="uni-form__control">
  <input type="text" class="uni-form__input" id="text1" aria-describedby="text1Help" placeholder="Enter your name here"   >
  </div>
  <p class="uni-form__help-message" id="text1Help">This optional helper text provides additional guidance</p>
</div>
<div class="uni-form__item l-grid__item   ">
  <label class="uni-form__label" for="text1">This is a label</label>
  <div class="uni-form__control">
  <input type="text" class="uni-form__input" id="text1" aria-describedby="text1Help" placeholder="Enter your name here"   >
  </div>
  <p class="uni-form__help-message" id="text1Help">This optional helper text provides additional guidance</p>
</div>
</fieldset>
</div>

Uniform-UI-Component

Documentation →

<FormSection sectionText="This is a section header">
  <InputText label="Name" placeholder="Enter you name"/>
  <InputText label="Job" placeholder="Enter your job e.g. Ditch Digger"/>
</FormSection>

# Item Divider

In instances where you want to create a visual break from one uni-form__item and another, add the class uni-form__item--has-divider to that item. While uni-form__section elements provide thematic breaks in sections of a form, this modifier is purely for visual breaks from one item to another.

This optional helper text provides additional guidance

This optional helper text provides additional guidance

<!-- Section -->
<div class="uni-form__item l-grid__item   ">
  <label class="uni-form__label" for="text1">This is a label</label>
  <div class="uni-form__control">
  <input type="text" class="uni-form__input" id="text1" aria-describedby="text1Help" placeholder="Enter your name here"   >
  </div>
  <p class="uni-form__help-message" id="text1Help">This optional helper text provides additional guidance</p>
</div>
<div class="uni-form__item l-grid__item    uni-form__item--has-divider">
  <label class="uni-form__label" for="text1">This is a label</label>
  <div class="uni-form__control">
  <input type="text" class="uni-form__input" id="text1" aria-describedby="text1Help" placeholder="Enter your job e.g. Ditch Digger"   >
  </div>
  <p class="uni-form__help-message" id="text1Help">This optional helper text provides additional guidance</p>
</div>

Uniform-UI-Component

Documentation →

<InputText hasDivider/>

# Form Mixins

# Input Default mixin

Used to create standard Inputs.

@include button($variant, $bespoke);

While the mixin allows you to create bespoke, non-Uniform inputs, we strongly encourage you to reconsider creating new variants. Regardless, you’ll need to reach out to Design Systems to learn the additional hoops that need to be jumped through to create your own variants.

Settings

Parameter Type Default Value Description
$variant list-map value standard There's currently one setting available [ primary ]
$bespoke --- null This parameter allows you to create custom sizes for inputs, which you probably shouldn't do. However, if you do, set this to true

# Form Size mixin

Used to create size variations for form elements.

@include form-size($size, $element);

Settings

Parameter Type Default Value Description
$size list-map value medium Use one of three size [ small, medium, large ]
$element list-map value input The element name matches up to values in the list-map, and creates the appropriate element associated classes. e.g. `uni-from__input--small`

# Form Check mixin

Used to create checkboxes and radios.

@include form-size($type, $color);

Settings

Parameter Type Default Value Description
$type string check Use on of two values [ check, radio ]
$color list-map value standard Pulls values from the standard list map for forms

# Form Disabled mixin

Logic less mixin purely used to apply disabled styles to elements

@include form-disabled;