Navigation
Getting Started
Fundamentals
Components
Utilities
Documentation

Inputs

Code Examples

Spark-Core

Examples of form elements.

Information

  • Special characters used in formatting (like the hyphens in the SSN field) are not automatically removed from the field value and may need to be manually removed depending on your implementation details.
  • You should use helper text when a user needs further clarification beyond the field label.

Restrictions

  • You should always add the novalidate attribute to your form when using Spark elements. Spark handles form validation internally, so we don't want the browser validation to trigger.
  • Make sure that each label's for attribute matches the id attribute of the corresponding input element.
  • Each input element's id should be unique on the page.
  • You need to make sure that the id referenced in aria-describedby matches the id on the error container.

Angular Information

The input components expect HTML for labels and inputs to be inside the provided sprk elements. We do it this way so that you can use standard HTML attributes, such as disabled and readonly. Also, with the markup exposed, you're able to bind your Angular form logic directly.

The inputs are grouped into two groups, those that make use of sprk-input-container, and those that use sprk-selection-container. The sprk-input-container inputs expect the HTML for labels and inputs whereas the sprk-selection-container elements expect there to be sprk-selection-item-container components inside. sprk-selection-item-container components also expect label and input HTML. There are some inputs variants that make use of both sprk-input-container and sprk-selection-item-container, such as the password input.

See below for information regarding properties that apply to all inputs:

Property Property Type Description
sprkLabel Directive Assigns an element as a label to be tied to a sprkInput element in the same container.
sprkInput Directive Assigns an element as in input to be tied to a sprkLabel element in the same container.
sprkFieldError Directive Assigns an element as an error message to be tied to a sprkInput element in the same container.
sprkHelperText Directive Assigns an element as helper text, tied to a sprkInput element in the same container.

All input components can also make use of:

Input Type Description
additionalClasses string A space-separated list of class names to be appended to the class attribute of the given component.

Text Input

This is the base form input.

Information

  • The input's 'type' attribute should be the most appropriate value that semantically matches your use case.

Links

<div class="sprk-b-InputContainer">
  <label for="text-input-normal" class="sprk-b-Label">Text Input Label</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="text-input-normal" type="text" aria-describedby="text-input-normal--error-container">
  <div class="sprk-b-ErrorText" id="text-input-normal--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Text Input Label</label>
  <input name="text_input" [additionalClasses]="textInput.invalid && textInput.dirty ? 'sprk-b-TextInput--error': ''" type="text" [(ngModel)]="text_input" required #textInput="ngModel" sprkInput>
</sprk-input-container>

Text Input - Error State

This is the base form input.

Information

  • The input's 'type' attribute should be the most appropriate value that semantically matches your use case.

Links

There is an error on this field.
<div class="sprk-b-InputContainer">
  <label for="text-input-error" class="sprk-b-Label">Text Input Label</label>
  <input class="sprk-b-TextInput sprk-b-TextInput--error sprk-u-Width-100" id="text-input-error" type="text" aria-describedby="text-input-error--error-container" aria-invalid="true">
  <div class="sprk-b-ErrorText" id="text-input-error--error-container">
    There is an error on this field.</div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Text Input Label</label>
  <input name="text_input" [additionalClasses]="textInput.invalid && textInput.dirty ? 'sprk-b-TextInput--error': ''" type="text" [(ngModel)]="text_input" required #textInput="ngModel" sprkInput>
  <span [hidden]="textInput.valid || textInput.pristine" sprkFieldError>There is an error on this field.</span>
</sprk-input-container>

Text Input - Disabled State

This is the base form input.

Information

  • The input's 'type' attribute should be the most appropriate value that semantically matches your use case.

Links

<div class="sprk-b-InputContainer">
  <label for="text-input-disabled" class="sprk-b-Label">Text Input Label</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="text-input-disabled" type="text" aria-describedby="text-input-disabled--error-container" disabled>
  <div class="sprk-b-ErrorText" id="text-input-disabled--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Text Input Label</label>
  <input disabled name="text_input" [additionalClasses]="textInput.invalid && textInput.dirty ? 'sprk-b-TextInput--error': ''" type="text" [(ngModel)]="text_input" required #textInput="ngModel" sprkInput>
</sprk-input-container>
State Selection

Checkboxes - Disabled State

This type of input should be used when you want the user to indicate that a value is true or false. Multiple checkboxes can be used when the user needs to be able to select multiple items from a list. 

<div class="sprk-b-InputContainer">
  <fieldset class="sprk-b-Fieldset">
    <legend class="sprk-b-Legend">
      <label class="sprk-b-Label">Checkbox Group Label</label>
    </legend>
    <div class="sprk-b-SelectionContainer">
      <input id="checkbox-disabled-1" type="checkbox" aria-describedby="checkbox-disabled--error-container" disabled>
      <label for="checkbox-disabled-1" class="sprk-b-Label sprk-b-Label--inline sprk-u-mls">Checkbox Item 1</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="checkbox-disabled-2" type="checkbox" aria-describedby="checkbox-disabled--error-container" disabled>
      <label for="checkbox-disabled-2" class="sprk-b-Label sprk-b-Label--inline sprk-u-mls">Checkbox Item 2</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="checkbox-disabled-3" type="checkbox" aria-describedby="checkbox-disabled--error-container" disabled>
      <label for="checkbox-disabled-3" class="sprk-b-Label sprk-b-Label--inline sprk-u-mls">Checkbox Item 3</label>
    </div>
  </fieldset>
  <div class="sprk-b-ErrorText" id="checkbox-disabled--error-container">
  </div>
</div>
          
<sprk-selection-container>
  <label sprkLabel>
    Checkbox Group Label
  </label>

  <sprk-selection-item-container>
    <input disabled type="checkbox" name="checkbox_input" [(ngModel)]="checkbox_input1" sprkSelectionInput #checkboxInput1="ngModel">

    <label sprkSelectionLabel>
      Checkbox Item 1
    </label>
  </sprk-selection-item-container>

  <sprk-selection-item-container>
    <input disabled type="checkbox" name="checkbox_input" [(ngModel)]="checkbox_input2" sprkSelectionInput #checkboxInput2="ngModel">

    <label sprkSelectionLabel>
      Checkbox Item 2
    </label>
  </sprk-selection-item-container>

  <sprk-selection-item-container>
    <input disabled type="checkbox" name="checkbox_input" [(ngModel)]="checkbox_input3" sprkSelectionInput #checkboxInput3="ngModel">

    <label sprkSelectionLabel>
      Checkbox Item 3
    </label>
  </sprk-selection-item-container>
</sprk-selection-container>

Checkboxes - Error State

This type of input should be used when you want the user to indicate that a value is true or false. Multiple checkboxes can be used when the user needs to be able to select multiple items from a list.

There is an error on this field.
<div class="sprk-b-InputContainer">
  <fieldset class="sprk-b-Fieldset">
    <legend class="sprk-b-Legend">
      <label class="sprk-b-Label">Checkbox Group Label</label>
    </legend>
    <div class="sprk-b-SelectionContainer">
      <input id="checkbox-error-1" type="checkbox" aria-describedby="checkbox-error--error-container">
      <label for="checkbox-error-1" class="sprk-b-Label sprk-b-Label--inline sprk-u-mls">Checkbox Item 1</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="checkbox-error-2" type="checkbox" aria-describedby="checkbox-error--error-container">
      <label for="checkbox-error-2" class="sprk-b-Label sprk-b-Label--inline sprk-u-mls">Checkbox Item 2</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="checkbox-error-3" type="checkbox" aria-describedby="checkbox-error--error-container">
      <label for="checkbox-error-3" class="sprk-b-Label sprk-b-Label--inline sprk-u-mls">Checkbox Item 3</label>
    </div>
  </fieldset>
  <div class="sprk-b-ErrorText" id="checkbox-error--error-container">
    There is an error on this field.</div>
</div>
          
<sprk-selection-container>
  <label sprkLabel>
    Checkbox Group Label
  </label>

  <sprk-selection-item-container>
    <input type="checkbox" name="checkbox_input" [(ngModel)]="checkbox_input1" sprkSelectionInput #checkboxInput1="ngModel">

    <label sprkSelectionLabel>
      Checkbox Item 1
    </label>
  </sprk-selection-item-container>

  <sprk-selection-item-container>
    <input type="checkbox" name="checkbox_input" [(ngModel)]="checkbox_input2" sprkSelectionInput #checkboxInput2="ngModel">

    <label sprkSelectionLabel>
      Checkbox Item 2
    </label>
  </sprk-selection-item-container>

  <sprk-selection-item-container>
    <input type="checkbox" name="checkbox_input" [(ngModel)]="checkbox_input3" sprkSelectionInput #checkboxInput3="ngModel">

    <label sprkSelectionLabel>
      Checkbox Item 3
    </label>
  </sprk-selection-item-container>
  <span [hidden]="!isCheckboxValid" sprkFieldError>This field is invalid.</span>
</sprk-selection-container>

Checkboxes

This type of input should be used when you want the user to indicate that a value is true or false. Multiple checkboxes can be used when the user needs to be able to select multiple items from a list. 

<div class="sprk-b-InputContainer">
  <fieldset class="sprk-b-Fieldset">
    <legend class="sprk-b-Legend">
      <label class="sprk-b-Label">Checkbox Group Label</label>
    </legend>
    <div class="sprk-b-SelectionContainer">
      <input id="checkbox-normal-1" type="checkbox" aria-describedby="checkbox-normal--error-container">
      <label for="checkbox-normal-1" class="sprk-b-Label sprk-b-Label--inline sprk-u-mls">Checkbox Item 1</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="checkbox-normal-2" type="checkbox" aria-describedby="checkbox-normal--error-container">
      <label for="checkbox-normal-2" class="sprk-b-Label sprk-b-Label--inline sprk-u-mls">Checkbox Item 2</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="checkbox-normal-3" type="checkbox" aria-describedby="checkbox-normal--error-container">
      <label for="checkbox-normal-3" class="sprk-b-Label sprk-b-Label--inline sprk-u-mls">Checkbox Item 3</label>
    </div>
  </fieldset>
  <div class="sprk-b-ErrorText" id="checkbox-normal--error-container">
  </div>
</div>
          
<sprk-selection-container>
  <label sprkLabel>
    Checkbox Group Label
  </label>

  <sprk-selection-item-container>
    <input type="checkbox" name="checkbox_input" [(ngModel)]="checkbox_input1" sprkSelectionInput #checkboxInput1="ngModel">

    <label sprkSelectionLabel>
      Checkbox Item 1
    </label>
  </sprk-selection-item-container>

  <sprk-selection-item-container>
    <input type="checkbox" name="checkbox_input" [(ngModel)]="checkbox_input2" sprkSelectionInput #checkboxInput2="ngModel">

    <label sprkSelectionLabel>
      Checkbox Item 2
    </label>
  </sprk-selection-item-container>

  <sprk-selection-item-container>
    <input type="checkbox" name="checkbox_input" [(ngModel)]="checkbox_input3" sprkSelectionInput #checkboxInput3="ngModel">

    <label sprkSelectionLabel>
      Checkbox Item 3
    </label>
  </sprk-selection-item-container>
</sprk-selection-container>
State Selection

Radio Buttons

A radio button allows a user to indicate if a value is true or false. When grouped together, only one item in a radio group can be true at any one time.

Restrictions

  • Unlike a checkbox, a radio button cannot be clicked again to clear its value.

Angular

Similar to checkboxes, radios use sprk-selection-container and sprk-selection-item-container 

<div class="sprk-b-InputContainer">
  <fieldset class="sprk-b-Fieldset">
    <legend class="sprk-b-Legend">
      <label class="sprk-b-Label">Radio Group Label</label>
    </legend>
    <div class="sprk-b-SelectionContainer">
      <input id="radio-normal-1" type="radio" name="radio-normal" aria-describedby="radio-normal--error-container">
      <label for="radio-normal-1" class="sprk-b-Label sprk-b-Label--inline sprk-u-mls">Radio Item 1</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="radio-normal-2" type="radio" name="radio-normal" aria-describedby="radio-normal--error-container">
      <label for="radio-normal-2" class="sprk-b-Label sprk-b-Label--inline sprk-u-mls">Radio Item 2</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="radio-normal-3" type="radio" name="radio-normal" aria-describedby="radio-normal--error-container">
      <label for="radio-normal-3" class="sprk-b-Label sprk-b-Label--inline sprk-u-mls">Radio Item 3</label>
    </div>
  </fieldset>
  <div class="sprk-b-ErrorText" id="radio-normal--error-container">
  </div>
</div>
          
<sprk-selection-container>
  <label sprkLabel>Radio Group Label</label>
  <sprk-selection-item-container>
    <input type="radio" value="1" name="radio_input" [(ngModel)]="radio_input" sprkSelectionInput #radioInput="ngModel">
    <label sprkSelectionLabel>Item 1</label>
  </sprk-selection-item-container>
  <sprk-selection-item-container>
    <input type="radio" value="2" name="radio_input" sprkSelectionInput [(ngModel)]="radio_input" #radioInput="ngModel">
    <label sprkSelectionLabel>Item 2</label>
  </sprk-selection-item-container>
  <sprk-selection-item-container>
    <input type="radio" value="3" name="radio_input" sprkSelectionInput [(ngModel)]="radio_input" #radioInput="ngModel">
    <label sprkSelectionLabel>Item 3</label>
  </sprk-selection-item-container>
</sprk-selection-container>

Radio Buttons - Error State

A radio button allows a user to indicate if a value is true or false. When grouped together, only one item in a radio group can be true at any one time.

Restrictions

  • Unlike a checkbox, a radio button cannot be clicked again to clear its value.
There is an error on this field.
<div class="sprk-b-InputContainer">
  <fieldset class="sprk-b-Fieldset">
    <legend class="sprk-b-Legend">
      <label class="sprk-b-Label">Radio Group Label</label>
    </legend>
    <div class="sprk-b-SelectionContainer">
      <input id="radio-error-1" type="radio" name="radio-error" aria-describedby="radio-error--error-container">
      <label for="radio-error-1" class="sprk-b-Label sprk-b-Label--inline sprk-u-mls">Radio Item 1</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="radio-error-2" type="radio" name="radio-error" aria-describedby="radio-error--error-container">
      <label for="radio-error-2" class="sprk-b-Label sprk-b-Label--inline sprk-u-mls">Radio Item 2</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="radio-error-3" type="radio" name="radio-error" aria-describedby="radio-error--error-container">
      <label for="radio-error-3" class="sprk-b-Label sprk-b-Label--inline sprk-u-mls">Radio Item 3</label>
    </div>
  </fieldset>
  <div class="sprk-b-ErrorText" id="radio-error--error-container">
    There is an error on this field.</div>
</div>
          
<sprk-selection-container>
  <label sprkLabel>Radio Group Label</label>
  <sprk-selection-item-container>
    <input type="radio" value="1" name="radio_input" [(ngModel)]="radio_input" sprkSelectionInput #radioInput="ngModel">
    <label sprkSelectionLabel>Item 1</label>
  </sprk-selection-item-container>
  <sprk-selection-item-container>
    <input type="radio" value="2" name="radio_input" sprkSelectionInput [(ngModel)]="radio_input" #radioInput="ngModel">
    <label sprkSelectionLabel>Item 2</label>
  </sprk-selection-item-container>
  <sprk-selection-item-container>
    <input type="radio" value="3" name="radio_input" sprkSelectionInput [(ngModel)]="radio_input" #radioInput="ngModel">
    <label sprkSelectionLabel>Item 3</label>
  </sprk-selection-item-container>
</sprk-selection-container>

Radio Buttons - Disabled State

A radio button allows a user to indicate if a value is true or false. When grouped together, only one item in a radio group can be true at any one time.

Restrictions

  • Unlike a checkbox, a radio button cannot be clicked again to clear its value.
<div class="sprk-b-InputContainer">
  <fieldset class="sprk-b-Fieldset">
    <legend class="sprk-b-Legend">
      <label class="sprk-b-Label">Radio Group Label</label>
    </legend>
    <div class="sprk-b-SelectionContainer">
      <input id="radio-disabled-1" type="radio" name="radio-disabled" aria-describedby="radio-disabled--error-container" disabled>
      <label for="radio-disabled-1" class="sprk-b-Label sprk-b-Label--inline sprk-u-mls">Radio Item 1</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="radio-disabled-2" type="radio" name="radio-disabled" aria-describedby="radio-disabled--error-container" disabled>
      <label for="radio-disabled-2" class="sprk-b-Label sprk-b-Label--inline sprk-u-mls">Radio Item 2</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="radio-disabled-3" type="radio" name="radio-disabled" aria-describedby="radio-disabled--error-container" disabled>
      <label for="radio-disabled-3" class="sprk-b-Label sprk-b-Label--inline sprk-u-mls">Radio Item 3</label>
    </div>
  </fieldset>
  <div class="sprk-b-ErrorText" id="radio-disabled--error-container">
  </div>
</div>
          
<sprk-selection-container>
  <label sprkLabel>Radio Group Label</label>
  <sprk-selection-item-container>
    <input type="radio" value="1" name="radio_input" [(ngModel)]="radio_input" sprkSelectionInput #radioInput="ngModel" disabled>
    <label sprkSelectionLabel>Item 1</label>
  </sprk-selection-item-container>
  <sprk-selection-item-container>
    <input type="radio" value="2" name="radio_input" sprkSelectionInput [(ngModel)]="radio_input" #radioInput="ngModel" disabled>
    <label sprkSelectionLabel>Item 2</label>
  </sprk-selection-item-container>
  <sprk-selection-item-container>
    <input type="radio" value="3" name="radio_input" sprkSelectionInput [(ngModel)]="radio_input" #radioInput="ngModel" disabled>
    <label sprkSelectionLabel>Item 3</label>
  </sprk-selection-item-container>
</sprk-selection-container>
State Selection

Select Box

This input type should be used when a user needs to select a single option from a list of two or more options.

Information

  • Every item in the select input should be a valid option. As a best practice, do not put "Select an option..." or similar as the first option in the dropdown. If you want to provide further instructions related to this input, use Helper Text.
<div class="sprk-b-InputContainer">
  <label for="select-normal" class="sprk-b-Label">Select Box Label</label>
  <select class="sprk-b-Select" id="select-normal" aria-describedby="select-normal--error-container">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <optgroup label="Grouped Options">
      <option value="g1">Grouped Option 1</option>
      <option value="g2">Grouped Option 2</option>
      <option value="g3">Grouped Option 3</option>
    </optgroup>
  </select>
  <div class="sprk-b-ErrorText" id="select-normal--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Select Box Label</label>
  <select class="sprk-b-Select" id="select-normal" aria-describedby="select-normal--error-container" sprkInput>
    <option value="none">Please choose...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <optgroup label="Grouped Options">
      <option value="g1">Grouped Option 1</option>
      <option value="g2">Grouped Option 2</option>
      <option value="g3">Grouped Option 3</option>
    </optgroup>
  </select>
</sprk-input-container>

Select Box - Error State

This input type should be used when a user needs to select a single option from a list of two or more options.

Information

  • Every item in the select input should be a valid option. As a best practice, do not put "Select an option..." or similar as the first option in the dropdown. If you want to provide further instructions related to this input, use Helper Text.
There is an error on this field.
<div class="sprk-b-InputContainer">
  <label for="select-error" class="sprk-b-Label">Select Box Label</label>
  <select class="sprk-b-Select sprk-b-Select--error" id="select-error" aria-describedby="select-error--error-container">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <optgroup label="Grouped Options">
      <option value="g1">Grouped Option 1</option>
      <option value="g2">Grouped Option 2</option>
      <option value="g3">Grouped Option 3</option>
    </optgroup>
  </select>
  <div class="sprk-b-ErrorText" id="select-error--error-container">
    There is an error on this field.</div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Select Box Label</label>
  <select class="sprk-b-Select" id="select-normal" aria-describedby="select-normal--error-container" sprkInput>
    <option value="none">Please choose...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <optgroup label="Grouped Options">
      <option value="g1">Grouped Option 1</option>
      <option value="g2">Grouped Option 2</option>
      <option value="g3">Grouped Option 3</option>
    </optgroup>
  </select>
</sprk-input-container>

Select Box - Disabled State

This input type should be used when a user needs to select a single option from a list of two or more options.

Information

  • Every item in the select input should be a valid option. As a best practice, do not put "Select an option..." or similar as the first option in the dropdown. If you want to provide further instructions related to this input, use Helper Text.
<div class="sprk-b-InputContainer">
  <label for="select-disabled" class="sprk-b-Label">Select Box Label</label>
  <select class="sprk-b-Select" id="select-disabled" aria-describedby="select-disabled--error-container" disabled>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <optgroup label="Grouped Options">
      <option value="g1">Grouped Option 1</option>
      <option value="g2">Grouped Option 2</option>
      <option value="g3">Grouped Option 3</option>
    </optgroup>
  </select>
  <div class="sprk-b-ErrorText" id="select-disabled--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Select Box Label</label>
  <select class="sprk-b-Select" id="select-normal" aria-describedby="select-normal--error-container" sprkInput disabled>
    <option value="none">Please choose...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <optgroup label="Grouped Options">
      <option value="g1">Grouped Option 1</option>
      <option value="g2">Grouped Option 2</option>
      <option value="g3">Grouped Option 3</option>
    </optgroup>
  </select>
</sprk-input-container>
State Selection

Textarea - Error State

This input is for entering multiple lines of freeform text.

There is an error on this field.
<div class="sprk-b-InputContainer">
  <label for="textarea-error" class="sprk-b-Label">Description</label>
  <textarea class="sprk-b-TextInput  sprk-b-TextInput--error sprk-u-Width-100" id="textarea-error" aria-describedby="textarea-error--error-container" aria-invalid="true"></textarea>
  <div class="sprk-b-ErrorText" id="textarea-error--error-container">
    There is an error on this field.</div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Description</label>
  <textarea name="textarea_input" [(ngModel)]="textarea_input" #textareaInput="ngModel" sprkInput></textarea>
  <span [hidden]="textInput.valid || textInput.pristine" sprkFieldError>There is an error on this field.</span>
</sprk-input-container>

Textarea - Disabled State

This input is for entering multiple lines of freeform text. 

<div class="sprk-b-InputContainer">
  <label for="textarea-disabled" class="sprk-b-Label">Description</label>
  <textarea class="sprk-b-TextInput  sprk-u-Width-100" id="textarea-disabled" aria-describedby="textarea-disabled--error-container" disabled></textarea>
  <div class="sprk-b-ErrorText" id="textarea-disabled--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Description</label>
  <textarea disabled name="textarea_input" [(ngModel)]="textarea_input" #textareaInput="ngModel" sprkInput></textarea>
</sprk-input-container>

Textarea

This input is for entering multiple lines of freeform text. 

<div class="sprk-b-InputContainer">
  <label for="textarea-normal" class="sprk-b-Label">Description</label>
  <textarea class="sprk-b-TextInput  sprk-u-Width-100" id="textarea-normal" aria-describedby="textarea-normal--error-container"></textarea>
  <div class="sprk-b-ErrorText" id="textarea-normal--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Description</label>
  <textarea name="textarea_input" [(ngModel)]="textarea_input" #textareaInput="ngModel" sprkInput></textarea>
</sprk-input-container>
State Selection

SSN Input

This input is used to collect a Social Security Number.

Information

  • Checking "Show SSN" removes the mask and shows the entered value.
  • Masking is automatically applied when the field contains a valid input.
  • The field value contains special characters (-) which you may need to parse out before submitting the form.
<div class="sprk-b-InputContainer" data-sprk-input="ssn">
  <label for="ssn-normal" class="sprk-b-Label">Social Security #</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="ssn-normal" type="password" pattern="(^(?!666|000|9\d{2})\d{3}([-]{0,1})(?!00)\d{2}\1(?!0{4})\2\d{4}$)|^$" placeholder="000-00-0000" aria-describedby="ssn-normal--error-container">
  <div class="sprk-b-SelectionContainer">
    <input id="ssn-normal-show-ssn" type="checkbox">
    <label for="ssn-normal-show-ssn" class="sprk-b-Label--inline sprk-u-mls">Show SSN</label>
  </div>
  <div class="sprk-b-ErrorText" id="ssn-normal--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>SSN Input</label>
  <input [type]="ssnType" [additionalClasses]="ssnInput.invalid && ssnInput.dirty ? 'sprk-b-TextInput--error': ''" pattern="(^(?!666|000|9\\d{2})\\d{3}([-]{0,1})(?!00)\\d{2}\\1(?!0{4})\\2\\d{4}$)|^$" placeholder="000-00-0000" name="ssn_input" [(ngModel)]="ssn_input" #ssnInput="ngModel" sprkFormatterSsn sprkInput>
  <sprk-selection-item-container>
    <input type="checkbox" sprkSelectionInput (click)="toggleSSNType()">
    <label sprkSelectionLabel>Show SSN</label>
  </sprk-selection-item-container>
  <div [hidden]="ssnInput.valid || ssnInput.pristine" sprkFieldError>There is an error on this field.</div>
</sprk-input-container>

Information

Directive Description

sprkFormatterSsn

Takes a valid value in the field and formats it to add hyphens.

SSN Input - Error State

This input is used to collect a Social Security Number.

Information

  • Checking "Show SSN" removes the mask and shows the entered value.
  • Masking is automatically applied when the field contains a valid input.
  • The field value contains special characters (-) which you may need to parse out before submitting the form.
There is an error on this field.
<div class="sprk-b-InputContainer" data-sprk-input="ssn">
  <label for="ssn-error" class="sprk-b-Label">Social Security #</label>
  <input class="sprk-b-TextInput sprk-b-TextInput--error sprk-u-Width-100" id="ssn-error" type="password" pattern="(^(?!666|000|9\d{2})\d{3}([-]{0,1})(?!00)\d{2}\1(?!0{4})\2\d{4}$)|^$" placeholder="000-00-0000" aria-invalid="true" aria-describedby="ssn-error--error-container">
  <div class="sprk-b-SelectionContainer">
    <input id="ssn-error-show-ssn" type="checkbox">
    <label for="ssn-error-show-ssn" class="sprk-b-Label--inline sprk-u-mls">Show SSN</label>
  </div>
  <div class="sprk-b-ErrorText" id="ssn-error--error-container">
    There is an error on this field.</div>
</div>
          
<sprk-input-container>
  <label sprkLabel>SSN Input</label>
  <input [type]="ssnType" [additionalClasses]="ssnInput.invalid && ssnInput.dirty ? 'sprk-b-TextInput--error': ''" pattern="(^(?!666|000|9\\d{2})\\d{3}([-]{0,1})(?!00)\\d{2}\\1(?!0{4})\\2\\d{4}$)|^$" placeholder="000-00-0000" name="ssn_input" [(ngModel)]="ssn_input" #ssnInput="ngModel" sprkFormatterSsn sprkInput>
  <sprk-selection-item-container>
    <input type="checkbox" sprkSelectionInput (click)="toggleSSNType()">
    <label sprkSelectionLabel>Show SSN</label>
  </sprk-selection-item-container>
  <div [hidden]="ssnInput.valid || ssnInput.pristine" sprkFieldError>There is an error on this field.</div>
</sprk-input-container>

SSN Input - Disabled State

This input is used to collect a Social Security Number.

Information

  • Checking "Show SSN" removes the mask and shows the entered value.
  • Masking is automatically applied when the field contains a valid input.
  • The field value contains special characters (-) which you may need to parse out before submitting the form.
<div class="sprk-b-InputContainer" data-sprk-input="ssn">
  <label for="ssn-disabled" class="sprk-b-Label">Social Security #</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="ssn-disabled" type="password" pattern="(^(?!666|000|9\d{2})\d{3}([-]{0,1})(?!00)\d{2}\1(?!0{4})\2\d{4}$)|^$" placeholder="000-00-0000" aria-describedby="ssn-disabled--error-container" disabled>
  <div class="sprk-b-SelectionContainer">
    <input id="ssn-disabled-show-ssn" type="checkbox" disabled>
    <label for="ssn-disabled-show-ssn" class="sprk-b-Label--inline sprk-u-mls">Show SSN</label>
  </div>
  <div class="sprk-b-ErrorText" id="ssn-disabled--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>SSN Input</label>
  <input [type]="ssnType" [additionalClasses]="ssnInput.invalid && ssnInput.dirty ? 'sprk-b-TextInput--error': ''" pattern="(^(?!666|000|9\\d{2})\\d{3}([-]{0,1})(?!00)\\d{2}\\1(?!0{4})\\2\\d{4}$)|^$" placeholder="000-00-0000" name="ssn_input" [(ngModel)]="ssn_input" #ssnInput="ngModel" sprkFormatterSsn sprkInput disabled>
  <sprk-selection-item-container>
    <input type="checkbox" sprkSelectionInput (click)="toggleSSNType()">
    <label sprkSelectionLabel>Show SSN</label>
  </sprk-selection-item-container>
  <div [hidden]="ssnInput.valid || ssnInput.pristine" sprkFieldError>There is an error on this field.</div>
</sprk-input-container>
State Selection

Search Input

This input is used for entering search queries. 

<div class="sprk-b-InputContainer">
  <label for="search-normal" class="sprk-b-Label">Search</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="search-normal" type="search" role="search" aria-describedby="search-normal--error-container">
  <div class="sprk-b-ErrorText" id="search-normal--error-container"></div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Search Input</label>
  <input name="search_input" type="search" [(ngModel)]="search_input" #searchInput="ngModel" sprkInput>
</sprk-input-container>

Search Input - Error State

This input is used for entering search queries.

There is an error on this field.
<div class="sprk-b-InputContainer">
  <label for="search-error" class="sprk-b-Label">Search</label>
  <input class="sprk-b-TextInput sprk-b-TextInput--error sprk-u-Width-100" id="search-error" type="search" role="search" aria-describedby="search-error--error-container" aria-invalid="true">
  <div class="sprk-b-ErrorText" id="search-error--error-container">There is an error on this field.</div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Search Input</label>
  <input name="search_input" type="search" [(ngModel)]="search_input" #searchInput="ngModel" sprkInput>
</sprk-input-container>

Search Input - Disabled State

This input is used for entering search queries. 

<div class="sprk-b-InputContainer">
  <label for="search-disabled" class="sprk-b-Label">Search</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="search-disabled" type="search" role="search" aria-describedby="search-disabled--error-container" disabled>
  <div class="sprk-b-ErrorText" id="search-disabled--error-container"></div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Search Input</label>
  <input name="search_input" type="search" [(ngModel)]="search_input" #searchInput="ngModel" sprkInput>
</sprk-input-container>
State Selection

Inline Search Input

This input is used for entering search queries. This component uses a compact layout that is suitable for use in a Masthead component. 

<div class="sprk-b-InputContainer  ">
  <label for="inline-search" class="sprk-u-ScreenReaderText">Search</label>
  <input placeholder="Search" class="sprk-b-TextInput  sprk-u-Width-100" id="inline-search" type="search" role="search" aria-describedby="inline-search--error-container">
  <div class="sprk-b-ErrorText" id="inline-search--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label additionalClasses="sprk-u-ScreenReaderText" sprkLabel>
    Inline Search Input
  </label>

  <input name="inline_search_input" type="search" role="search" placeholder="Search" [(ngModel)]="inline_search_input" #inlineSearchInput="ngModel" sprkInput>
</sprk-input-container>

Inline Search Input - Error State

This input is used for entering search queries. This component uses a compact layout that is suitable for use in a Masthead component.

There is an error on this field.
<div class="sprk-b-InputContainer  ">
  <label for="inline-search-error" class="sprk-u-ScreenReaderText">Search</label>
  <input placeholder="Search" class="sprk-b-TextInput sprk-b-TextInput--error  sprk-u-Width-100" id="inline-search-error" type="search" role="search" aria-describedby="inline-search-error--error-container" aria-invalid="true">
  <div class="sprk-b-ErrorText" id="inline-search-error--error-container">
    There is an error on this field.</div>
</div>
          
<sprk-input-container>
  <label additionalClasses="sprk-u-ScreenReaderText" sprkLabel>Inline Search Input</label>
  <input name="inline_search_input" type="search" role="search" placeholder="Search" [(ngModel)]="inline_search_input" #inlineSearchInput="ngModel" sprkInput>
</sprk-input-container>

Inline Search Input - Disabled State

This input is used for entering search queries. This component uses a compact layout that is suitable for use in a Masthead component. 

<div class="sprk-b-InputContainer  ">
  <label for="inline-search-disabled" class="sprk-u-ScreenReaderText">Search</label>
  <input placeholder="Search" class="sprk-b-TextInput  sprk-u-Width-100" id="inline-search-disabled" type="search" role="search" aria-describedby="inline-search-disabled--error-container" disabled>
  <div class="sprk-b-ErrorText" id="inline-search-disabled--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label additionalClasses="sprk-u-ScreenReaderText" sprkLabel>Inline Search Input</label>
  <input name="inline_search_input" type="search" role="search" placeholder="Search" [(ngModel)]="inline_search_input" #inlineSearchInput="ngModel" sprkInput>
</sprk-input-container>
State Selection

Monetary Input - Disabled State

This input is used to collect a monetary amount in US dollars.

Information

  • If no decimal amount is entered, the input will be automatically formatted with a decimal and two zeros on blur (ex. 1,000.00).
<div class="sprk-b-InputContainer" data-sprk-input="monetary">
  <label for="monetary-disabled" class="sprk-b-Label">Payment</label>
  <div class="sprk-b-TextInput--monetary">
    <input class="sprk-b-TextInput  sprk-u-Width-100 sprk-u-plm" pattern="(^\$?(\d+|\d{1,3}(,\d{3})*)(\.\d+)?$)|^$" id="monetary-disabled" type="tel" aria-describedby="monetary-disabled--error-container" disabled>
  </div>
  <div class="sprk-b-ErrorText" id="monetary-disabled--error-container">
  </div>
</div>
          
<sprk-input-container iconContainerClasses="sprk-b-TextInput--monetary">
  <label sprkLabel>Payment</label>
  <input name="monetary_input" type="text" [additionalClasses]="monetaryInput.invalid && monetaryInput.dirty ? 'sprk-b-TextInput--error sprk-u-plm': 'sprk-u-plm'" pattern="(^\\$?(\\d+|\\d{1,3}(,\\d{3})*)(\\.\\d+)?$)|^$" [(ngModel)]="monetary_input" #monetaryInput="ngModel" sprkFormatterMonetary sprkInput disabled>
  <div [hidden]="monetaryInput.valid || monetaryInput.pristine" sprkFieldError>
    Invalid amount.
  </div>
</sprk-input-container>

Monetary Input - Error State

This input is used to collect a monetary amount in US dollars.

Information

  • If no decimal amount is entered, the input will be automatically formatted with a decimal and two zeros on blur (ex. 1,000.00).
There is an error on this field.
<div class="sprk-b-InputContainer" data-sprk-input="monetary">
  <label for="monetary-error" class="sprk-b-Label">Payment</label>
  <div class="sprk-b-TextInput--monetary">
    <input class="sprk-b-TextInput sprk-b-TextInput--error  sprk-u-Width-100 sprk-u-plm" pattern="(^\$?(\d+|\d{1,3}(,\d{3})*)(\.\d+)?$)|^$" id="monetary-error" type="tel" aria-describedby="monetary-error--error-container" aria-invalid="true">
  </div>
  <div class="sprk-b-ErrorText" id="monetary-error--error-container">
    There is an error on this field.</div>
</div>
          
<sprk-input-container iconContainerClasses="sprk-b-TextInput--monetary">
  <label sprkLabel>Payment</label>
  <input name="monetary_input" type="text" [additionalClasses]="monetaryInput.invalid && monetaryInput.dirty ? 'sprk-b-TextInput--error sprk-u-plm': 'sprk-u-plm'" pattern="(^\\$?(\\d+|\\d{1,3}(,\\d{3})*)(\\.\\d+)?$)|^$" [(ngModel)]="monetary_input" #monetaryInput="ngModel" sprkFormatterMonetary sprkInput>
  <div [hidden]="monetaryInput.valid || monetaryInput.pristine" sprkFieldError>
    Invalid amount.
  </div>
</sprk-input-container>

Monetary Input

This input is used to collect a monetary amount in US dollars.

Information

  • If no decimal amount is entered, the input will be automatically formatted with a decimal and two zeros on blur (ex. 1,000.00).
<div class="sprk-b-InputContainer" data-sprk-input="monetary">
  <label for="monetary-normal" class="sprk-b-Label">Payment</label>
  <div class="sprk-b-TextInput--monetary">
    <input class="sprk-b-TextInput  sprk-u-Width-100 sprk-u-plm" pattern="(^\$?(\d+|\d{1,3}(,\d{3})*)(\.\d+)?$)|^$" id="monetary-normal" type="tel" aria-describedby="monetary-normal--error-container">
  </div>
  <div class="sprk-b-ErrorText" id="monetary-normal--error-container">
  </div>
</div>
          
<sprk-input-container iconContainerClasses="sprk-b-TextInput--monetary">
  <label sprkLabel>Payment</label>
  <input name="monetary_input" type="text" [additionalClasses]="monetaryInput.invalid && monetaryInput.dirty ? 'sprk-b-TextInput--error sprk-u-plm': 'sprk-u-plm'" pattern="(^\\$?(\\d+|\\d{1,3}(,\\d{3})*)(\\.\\d+)?$)|^$" [(ngModel)]="monetary_input" #monetaryInput="ngModel" sprkFormatterMonetary sprkInput>
  <div [hidden]="monetaryInput.valid || monetaryInput.pristine" sprkFieldError>
    Invalid amount.
  </div>
</sprk-input-container>

Information

See below for available customization options:

Directive Description Type

sprkFormatterMonetary

Formatter

Takes value in the field and formats it on blur to add commas and a decimal point.
State Selection

Password Input - Error State

This input is used to for entering a password. The value is masked by default.

Information

  • Checking "Show Password" removes the mask and shows the entered value.
There is an error on this field.
<div class="sprk-b-InputContainer" data-sprk-input="password">
  <label for="password-error" class="sprk-b-Label">Password</label>
  <input class="sprk-b-TextInput sprk-b-TextInput--error sprk-u-Width-100" id="password-error" type="password" aria-describedby="password-error--error-container" aria-invalid="true">
  <div class="sprk-b-SelectionContainer">
    <input id="password-error-show-password" type="checkbox">
    <label for="password-error-show-password" class="sprk-b-Label--inline sprk-u-mls">Show Password</label>
  </div>
  <div class="sprk-b-ErrorText" id="password-error--error-container">
    There is an error on this field.</div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Password</label>
  <input [type]="passwordType" name="password_input" sprkInput>
  <sprk-selection-item-container>
    <input type="checkbox" sprkSelectionInput (click)="togglePasswordType()">
    <label sprkSelectionLabel>Show Password</label>
  </sprk-selection-item-container>
</sprk-input-container>

Password Input - Disabled State

This input is used to for entering a password. The value is masked by default.

Information

  • Checking "Show Password" removes the mask and shows the entered value.
<div class="sprk-b-InputContainer" data-sprk-input="password">
  <label for="password-disabled" class="sprk-b-Label">Password</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="password-disabled" type="password" aria-describedby="password-disabled--error-container" disabled>
  <div class="sprk-b-SelectionContainer">
    <input id="password-disabled-show-password" type="checkbox" disabled>
    <label for="password-disabled-show-password" class="sprk-b-Label--inline sprk-u-mls">Show Password</label>
  </div>
  <div class="sprk-b-ErrorText" id="password-disabled--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Password</label>
  <input [type]="passwordType" name="password_input" sprkInput>
  <sprk-selection-item-container>
    <input type="checkbox" sprkSelectionInput (click)="togglePasswordType()" disabled>
    <label sprkSelectionLabel>Show Password</label>
  </sprk-selection-item-container>
</sprk-input-container>

Password Input

This input is used to for entering a password. The value is masked by default.

Information

  • Checking "Show Password" removes the mask and shows the entered value.

Angular

When show password is clicked, the togglePasswordType function runs. There is the option to bind to the click funtion to do other functionality. 

<div class="sprk-b-InputContainer" data-sprk-input="password">
  <label for="password-normal" class="sprk-b-Label">Password</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="password-normal" type="password" aria-describedby="password-normal--error-container">
  <div class="sprk-b-SelectionContainer">
    <input id="password-normal-show-password" type="checkbox">
    <label for="password-normal-show-password" class="sprk-b-Label--inline sprk-u-mls">Show Password</label>
  </div>
  <div class="sprk-b-ErrorText" id="password-normal--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Password</label>
  <input [type]="passwordType" name="password_input" sprkInput>
  <sprk-selection-item-container>
    <input type="checkbox" sprkSelectionInput (click)="togglePasswordType()">
    <label sprkSelectionLabel>Show Password</label>
  </sprk-selection-item-container>
</sprk-input-container>
State Selection

Helper Text

Helper text is used to provide additional contextual information or guidance for an input.

Information

  • Helper text should be placed above the error container in each input pattern.

Angular

Helper text is marked with the sprkHelperText directive.

Optional helper text, used to clarify the field's intent. 
<div class="sprk-b-InputContainer">
  <label for="text-input-normal" class="sprk-b-Label">
    Text Input Label
  </label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="text-input-normal-help" type="text" aria-describedby="text-input-normal-help--error-container">
  <div class="sprk-b-HelperText">
    Optional helper text, used to clarify the field's intent.
  </div>
  <div class="sprk-b-ErrorText" id="text-input-normal-help--error-container"></div>
</div>
          
<sprk-input-container>
  <label sprkLabel>
    Text Input Label
  </label>

  <input sprkInput name="text_input" type="text" [(ngModel)]="text_input" required #textInput="ngModel">

  <p sprkHelperText>
    Optional helper text, used to clarify the field's intent.
  </p>
</sprk-input-container>

Information

See below for available customization options:

Directive Input Type Description

sprkHelperText

additionalClasses string Allows a string of classes to add, in addition to the spark classes. Intended for overrides.

Phone Number Input - Disabled State

This input is used to collect a phone number.

Information

  • Masking is automatically applied when the field contains a valid input.
  • The field value contains special characters which you may need to parse out before submitting the form.
<div class="sprk-b-InputContainer" data-sprk-input="phone">
  <label for="phone-number-disabled" class="sprk-b-Label">Phone Number</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="phone-number-disabled" type="tel" pattern="(^(\+\d{1,2}\s)?((\(\d{3}\))|\d{3})[\s.-]?\d{3}[\s.-]?\d{4}$)|^$" placeholder="(000) 000-0000" aria-describedby="phone-number-disabled--error-container" disabled>
  <div class="sprk-b-ErrorText" id="phone-number-disabled--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Phone Number *</label>
  <input name="phone_input" [additionalClasses]="phoneInput.invalid && phoneInput.dirty ? 'sprk-b-TextInput--error': ''" type="text" pattern="(^(\\+\\d{1,2}\\s)?((\\(\\d{3}\\))|\\d{3})[\\s.-]?\\d{3}[\\s.-]?\\d{4}$)|^$" placeholder="(000) 000-0000" [(ngModel)]="phone_input" required #phoneInput="ngModel" sprkFormatterPhoneNumber sprkInput disabled>
  <span [hidden]="phoneInput.valid || phoneInput.pristine" sprkFieldError>
  </span>
</sprk-input-container>

Phone Number Input

This input is used to collect a phone number.

Information

  • Masking is automatically applied when the field contains a valid input.
  • The field value contains special characters which you may need to parse out before submitting the form.
<div class="sprk-b-InputContainer" data-sprk-input="phone">
  <label for="phone-input-normal" class="sprk-b-Label">Phone Number</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="phone-input-normal" type="tel" pattern="(^(\+\d{1,2}\s)?((\(\d{3}\))|\d{3})[\s.-]?\d{3}[\s.-]?\d{4}$)|^$" placeholder="(000) 000-0000" aria-describedby="phone-input-normal--error-container">
  <div class="sprk-b-ErrorText" id="phone-input-normal--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Phone Number *</label>
  <input name="phone_input" [additionalClasses]="phoneInput.invalid && phoneInput.dirty ? 'sprk-b-TextInput--error': ''" type="text" pattern="(^(\\+\\d{1,2}\\s)?((\\(\\d{3}\\))|\\d{3})[\\s.-]?\\d{3}[\\s.-]?\\d{4}$)|^$" placeholder="(000) 000-0000" [(ngModel)]="phone_input" required #phoneInput="ngModel" sprkFormatterPhoneNumber sprkInput>
  <span [hidden]="phoneInput.valid || phoneInput.pristine" sprkFieldError>
  </span>
</sprk-input-container>

Information

Directive Description

sprkFormatterPhoneNumber

Takes a valid value in the field and formats it to add parentheses and a hyphen.

Phone Number Input - Error State

This input is used to collect a phone number.

Information

  • Masking is automatically applied when the field contains a valid input.
  • The field value contains special characters which you may need to parse out before submitting the form.
There is an error on this field.
<div class="sprk-b-InputContainer" data-sprk-input="phone">
  <label for="phone-number-error" class="sprk-b-Label">Phone Number</label>
  <input class="sprk-b-TextInput sprk-b-TextInput--error sprk-u-Width-100" id="phone-number-error" type="tel" pattern="(^(\+\d{1,2}\s)?((\(\d{3}\))|\d{3})[\s.-]?\d{3}[\s.-]?\d{4}$)|^$" placeholder="(000) 000-0000" aria-describedby="phone-number-error--error-container" aria-invalid="true">
  <div class="sprk-b-ErrorText" id="phone-number-error--error-container">
    There is an error on this field.</div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Phone Number *</label>
  <input name="phone_input" [additionalClasses]="phoneInput.invalid && phoneInput.dirty ? 'sprk-b-TextInput--error': ''" type="text" pattern="(^(\\+\\d{1,2}\\s)?((\\(\\d{3}\\))|\\d{3})[\\s.-]?\\d{3}[\\s.-]?\\d{4}$)|^$" placeholder="(000) 000-0000" [(ngModel)]="phone_input" required #phoneInput="ngModel" sprkFormatterPhoneNumber sprkInput>
  <span [hidden]="phoneInput.valid || phoneInput.pristine" sprkFieldError>
  </span>
</sprk-input-container>
State Selection

Date Input

The date input is used for collecting date information. This component does not include a date picker.

Information

  • Spark recommends that this component be used when you expect the entered date to be in the past.
  • Masking is automatically applied when the field contains a valid input.
  • The field value contains special characters which you may need to parse out before submitting the form.
<div class="sprk-b-InputContainer" data-sprk-input="date">
  <label for="date-input-normal" class="sprk-b-Label">Date</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="date-input-normal" type="text" pattern="^(((0[1358]|1[02])([\/-]?)(0[1-9]|[12]\d|3[01])|(0[469]|11)([\/-]?)(0[1-9]|[12]\d|30)|02(\/?)((0?\d)|[12]\d))(\4|\7|\9)[12]\d{3})?$" placeholder="MM/DD/YYYY" aria-describedby="date-input-normal--error-container">
  <div class="sprk-b-ErrorText" id="date-input-normal--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Date</label>
  <input name="date_input" [additionalClasses]="dateInput.invalid && dateInput.dirty ? 'sprk-b-TextInput--error': ''" type="text" pattern="^(((0[1358]|1[02])([\\/-]?)(0[1-9]|[12]\\d|3[01])|(0[469]|11)([\\/-]?)(0[1-9]|[12]\\d|30)|02(\\/?)((0?\\d)|[12]\\d))(\\4|\\7|\\9)[12]\\d{3})?$" placeholder="MM/DD/YYYY" [(ngModel)]="date_input" #dateInput="ngModel" sprkFormatterDate sprkInput>
</sprk-input-container>

Information

See below for relevant directives:

Directive Description

sprkFormatterDate

When the 'input' event is fired, the value of the element will be formatted in the 'MM/DD/YYYY' date format.

Date Input - Error State

The date input is used for collecting date information. This component does not include a date picker.

Information

  • Spark recommends that this component be used when you expect the entered date to be in the past.
  • Masking is automatically applied when the field contains a valid input.
  • The field value contains special characters which you may need to parse out before submitting the form.
There is an error on this field.
<div class="sprk-b-InputContainer" data-sprk-input="date">
  <label for="date-input-error" class="sprk-b-Label">Date</label>
  <input class="sprk-b-TextInput sprk-b-TextInput--error sprk-u-Width-100" id="date-input-error" type="text" pattern="^(((0[1358]|1[02])([\/-]?)(0[1-9]|[12]\d|3[01])|(0[469]|11)([\/-]?)(0[1-9]|[12]\d|30)|02(\/?)((0?\d)|[12]\d))(\4|\7|\9)[12]\d{3})?$" placeholder="MM/DD/YYYY" aria-describedby="date-input-error--error-container" aria-invalid="true">
  <div class="sprk-b-ErrorText" id="date-input-error--error-container">
    There is an error on this field.</div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Date</label>
  <input name="date_input" [additionalClasses]="dateInput.invalid && dateInput.dirty ? 'sprk-b-TextInput--error': ''" type="text" pattern="^(((0[1358]|1[02])([\\/-]?)(0[1-9]|[12]\\d|3[01])|(0[469]|11)([\\/-]?)(0[1-9]|[12]\\d|30)|02(\\/?)((0?\\d)|[12]\\d))(\\4|\\7|\\9)[12]\\d{3})?$" placeholder="MM/DD/YYYY" [(ngModel)]="date_input" #dateInput="ngModel" sprkFormatterDate sprkInput>
  <span [hidden]="dateInput.valid || dateInput.pristine" sprkFieldError>There is an error on this field.</span>
</sprk-input-container>

Date Input - Disabled State

The date input is used for collecting date information. This component does not include a date picker.

Information

  • Spark recommends that this component be used when you expect the entered date to be in the past.
  • Masking is automatically applied when the field contains a valid input.
  • The field value contains special characters which you may need to parse out before submitting the form.
<div class="sprk-b-InputContainer" data-sprk-input="date">
  <label for="date-input-disabled" class="sprk-b-Label">Date</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="date-input-disabled" type="text" pattern="^(((0[1358]|1[02])([\/-]?)(0[1-9]|[12]\d|3[01])|(0[469]|11)([\/-]?)(0[1-9]|[12]\d|30)|02(\/?)((0?\d)|[12]\d))(\4|\7|\9)[12]\d{3})?$" placeholder="MM/DD/YYYY" aria-describedby="date-input-disabled--error-container" disabled>
  <div class="sprk-b-ErrorText" id="date-input-disabled--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Date</label>
  <input disabled name="date_input" [additionalClasses]="dateInput.invalid && dateInput.dirty ? 'sprk-b-TextInput--error': ''" type="text" pattern="^(((0[1358]|1[02])([\\/-]?)(0[1-9]|[12]\\d|3[01])|(0[469]|11)([\\/-]?)(0[1-9]|[12]\\d|30)|02(\\/?)((0?\\d)|[12]\\d))(\\4|\\7|\\9)[12]\\d{3})?$" placeholder="MM/DD/YYYY" [(ngModel)]="date_input" #dateInput="ngModel" sprkFormatterDate sprkInput>
  <span [hidden]="dateInput.valid || dateInput.pristine" sprkFieldError>There is an error on this field.</span>
</sprk-input-container>
State Selection

Date Picker - Error State

The date input is used for collecting date information. This component includes a date picker.

Information

  • Spark recommends that this component be used when you expect the entered date to be in the past.
  • Masking is automatically applied when the field contains a valid input.
  • The field value contains special characters which you may need to parse out before submitting the form.
There is an error on this field.
<div class="sprk-b-InputContainer" data-sprk-input="date" data-sprk-datepicker>
  <label for="datepicker-error" class="sprk-b-Label">Date</label>
  <div class="sprk-b-TextInput--date-picker">
    <svg class="sprk-c-Icon" viewBox="0 0 100 100">
      <use xlink:href="#calendar" />
    </svg>
    <input class="sprk-b-TextInput sprk-u-pll sprk-b-TextInput--error sprk-u-Width-100" id="datepicker-error" type="text" pattern="^(((0[1358]|1[02])([\/-]?)(0[1-9]|[12]\d|3[01])|(0[469]|11)([\/-]?)(0[1-9]|[12]\d|30)|02(\/?)((0?\d)|[12]\d))(\4|\7|\9)[12]\d{3})?$" placeholder="MM/DD/YYYY" aria-invalid="true" aria-describedby="datepicker-error--error-container">
  </div>
  <div class="sprk-b-ErrorText" id="datepicker-error--error-container">
    There is an error on this field.</div>
</div>
          
<sprk-input-container iconContainerClasses="sprk-b-TextInput--date-picker">
  <label sprkLabel>Date Input (picker)</label>
  <sprk-icon iconType="calendar" sprk-input-icon></sprk-icon>
  <input name="datepicker_input" type="text" [additionalClasses]="datepickerInput.invalid && datepickerInput.dirty ? 'sprk-b-TextInput--error sprk-u-pll': 'sprk-u-pll'" pattern="^(((0[1358]|1[02])([\\/-]?)(0[1-9]|[12]\\d|3[01])|(0[469]|11)([\\/-]?)(0[1-9]|[12]\\d|30)|02(\\/?)((0?\\d)|[12]\\d))(\\4|\\7|\\9)[12]\\d{3})?$" placeholder="MM/DD/YYYY" [(ngModel)]="datepicker_input" #datepickerInput="ngModel" sprkFormatterDate sprkDatepicker sprkInput>
  <div [hidden]="isDatePickerValid" sprkFieldError>There is an error on this field.</div>
</sprk-input-container>

Date Picker - Disabled State

The date input is used for collecting date information. This component includes a date picker.

Information

  • Spark recommends that this component be used when you expect the entered date to be in the past.
  • Masking is automatically applied when the field contains a valid input.
  • The field value contains special characters which you may need to parse out before submitting the form.
<div class="sprk-b-InputContainer" data-sprk-input="date" data-sprk-datepicker>
  <label for="datepicker-disabled" class="sprk-b-Label">Date</label>
  <div class="sprk-b-TextInput--date-picker">
    <svg class="sprk-c-Icon" viewBox="0 0 100 100">
      <use xlink:href="#calendar" />
    </svg>
    <input class="sprk-b-TextInput sprk-u-pll sprk-b-TextInput--error sprk-u-Width-100" id="datepicker-disabled" type="text" pattern="^(((0[1358]|1[02])([\/-]?)(0[1-9]|[12]\d|3[01])|(0[469]|11)([\/-]?)(0[1-9]|[12]\d|30)|02(\/?)((0?\d)|[12]\d))(\4|\7|\9)[12]\d{3})?$" placeholder="MM/DD/YYYY" aria-describedby="datepicker-disabled--error-container" disabled>
  </div>
  <div class="sprk-b-ErrorText" id="datepicker-disabled--error-container">
  </div>
</div>
          
<sprk-input-container iconContainerClasses="sprk-b-TextInput--date-picker">
  <label sprkLabel>Date Input (picker)</label>
  <sprk-icon iconType="calendar" sprk-input-icon></sprk-icon>
  <input disabled name="datepicker_input" type="text" [additionalClasses]="datepickerInput.invalid && datepickerInput.dirty ? 'sprk-b-TextInput--error sprk-u-pll': 'sprk-u-pll'" pattern="^(((0[1358]|1[02])([\\/-]?)(0[1-9]|[12]\\d|3[01])|(0[469]|11)([\\/-]?)(0[1-9]|[12]\\d|30)|02(\\/?)((0?\\d)|[12]\\d))(\\4|\\7|\\9)[12]\\d{3})?$" placeholder="MM/DD/YYYY" [(ngModel)]="datepicker_input" #datepickerInput="ngModel" sprkFormatterDate sprkDatepicker sprkInput>
</sprk-input-container>

Date Picker

The date input is used for collecting date information. This component includes a date picker.

Information

  • Spark recommends that this component be used when you expect the entered date to be in the past.
  • Masking is automatically applied when the field contains a valid input.
  • The field value contains special characters which you may need to parse out before submitting the form.

Angular

The date picker makes use of tiny-date-picker . See below for available customization options.

<div class="sprk-b-InputContainer" data-sprk-input="date" data-sprk-datepicker>
  <label for="datepicker-normal" class="sprk-b-Label">Date</label>
  <div class="sprk-b-TextInput--date-picker">
    <svg class="sprk-c-Icon" viewBox="0 0 100 100">
      <use xlink:href="#calendar" />
    </svg>
    <input class="sprk-b-TextInput sprk-u-pll sprk-u-Width-100" id="datepicker-normal" type="text" pattern="^(((0[1358]|1[02])([\/-]?)(0[1-9]|[12]\d|3[01])|(0[469]|11)([\/-]?)(0[1-9]|[12]\d|30)|02(\/?)((0?\d)|[12]\d))(\4|\7|\9)[12]\d{3})?$" placeholder="MM/DD/YYYY" aria-describedby="datepicker-normal--error-container">
  </div>
  <div class="sprk-b-ErrorText" id="datepicker-normal--error-container">
  </div>
</div>
          
<sprk-input-container iconContainerClasses="sprk-b-TextInput--date-picker">
  <label sprkLabel>Date</label>
  <sprk-icon iconType="calendar" sprk-input-icon></sprk-icon>
  <input name="datepicker_input" type="text" [additionalClasses]="datepickerInput.invalid && datepickerInput.dirty ? 'sprk-b-TextInput--error sprk-u-pll': 'sprk-u-pll'" pattern="^(((0[1358]|1[02])([\\/-]?)(0[1-9]|[12]\\d|3[01])|(0[469]|11)([\\/-]?)(0[1-9]|[12]\\d|30)|02(\\/?)((0?\\d)|[12]\\d))(\\4|\\7|\\9)[12]\\d{3})?$" placeholder="MM/DD/YYYY" [(ngModel)]="datepicker_input" #datepickerInput="ngModel" sprkFormatterDate sprkDatepicker sprkInput>
</sprk-input-container>

Information

See below for relevant directives:

Directive Description

sprkFormatterDate

When the 'input' event is fired, the value of the element will be formatted in the 'MM/DD/YYYY' date format.

sprkDatePicker

Sets up the datepicker code. Has minDate and maxDate available as inputs.

See below for customization options available for sprkDatePicker:

Input Type Description
minDate string Expects a date string that represents the earliest available date in the date picker's range. The default value is '01/1/2008.'
maxDate string Expects a date string that represents the last available date in the date picker's range. The default value is '01/1/2068.'
State Selection
sparkdesignsystem@quickenloans.com