Inputs

Code Examples

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, since we handle form validation ourselves, and don't use the browser's implementation.
  • 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.
  • You should use helper text, as linked below, when a user needs further clarification beyond the label.
  • Labels and error messages should be short and to the point.
  • Labels should not be longer than what will fit on one line at 320px.
  • The data-id property is provided as a hook for automated tools. If you have multiple instances of the same variant of a component on the same page, make sure each instance has a unique data-id property ("input-text-1", "input-text-2", "input-date-1", etc).

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.
<div class="sprk-b-InputContainer">
  <input class="sprk-b-TextInput sprk-u-Width-100" id="text-input-normal" data-id="text-input-normal" type="text" aria-describedby="text-input-normal--error-container" data-sprk-input="text">
  <div class="sprk-b-InputContainer__input-border"></div>
  <label for="text-input-normal" class="sprk-b-Label">Text Input Label</label>
  <div class="sprk-b-ErrorContainer" id="text-input-normal--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Text Input Label</label>
  <input name="text_input" [ngClass]="{ 'sprk-b-TextInput--error': textInput.invalid && textInput.dirty }" type="text" [(ngModel)]="text_input" required #textInput="ngModel" data-id="input-1" 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.
There is an error on this field.
<div class="sprk-b-InputContainer">
  <input class="sprk-b-TextInput sprk-b-TextInput--error sprk-u-Width-100" id="text-input-error" data-id="text-input-error" type="text" aria-describedby="text-input-error--error-container" aria-invalid="true" data-sprk-input="text">
  <div class="sprk-b-InputContainer__input-border"></div>
  <label for="text-input-error" class="sprk-b-Label">Text Input Label</label>
  <div class="sprk-b-ErrorContainer" id="text-input-error--error-container">
    <svg class="sprk-c-Icon sprk-c-Icon--m sprk-b-ErrorIcon" viewBox="0 0 64 64">
      <use xlink:href="#exclamation-filled" />
    </svg>
    <div class="sprk-b-ErrorText">
      There is an error on this field.
    </div>
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Text Input Label</label>
  <input name="text_input" [ngClass]="{ 'sprk-b-TextInput--error': textInput.invalid && textInput.dirty }" type="text" [(ngModel)]="text_input" required #textInput="ngModel" data-id="input-error-1" 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.
<div class="sprk-b-InputContainer">
  <input class="sprk-b-TextInput sprk-u-Width-100" id="text-input-disabled" data-id="text-input-disabled" type="text" aria-describedby="text-input-disabled--error-container" disabled data-sprk-input="text">
  <div class="sprk-b-InputContainer__input-border"></div>
  <label for="text-input-disabled" class="sprk-b-Label">Text Input Label</label>
  <div class="sprk-b-ErrorContainer" id="text-input-disabled--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Text Input Label</label>
  <input disabled name="text_input" [ngClass]="{ 'sprk-b-TextInput--error': textInput.invalid && textInput.dirty }" type="text" [(ngModel)]="text_input" required #textInput="ngModel" data-id="input-disabled-1" 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" data-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">Checkbox Item 1</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="checkbox-disabled-2" data-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">Checkbox Item 2</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="checkbox-disabled-3" data-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">Checkbox Item 3</label>
    </div>
  </fieldset>
  <div class="sprk-b-ErrorContainer" 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" data-id="checkbox-disabled-1">

    <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" data-id="checkbox-disabled-2">

    <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" data-id="checkbox-disabled-3">

    <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" data-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">Checkbox Item 1</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="checkbox-error-2" data-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">Checkbox Item 2</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="checkbox-error-3" data-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">Checkbox Item 3</label>
    </div>
  </fieldset>
  <div class="sprk-b-ErrorContainer" id="checkbox-error--error-container">
    <svg class="sprk-c-Icon sprk-c-Icon--m sprk-b-ErrorIcon" viewBox="0 0 64 64">
      <use xlink:href="#exclamation-filled" />
    </svg>
    <div class="sprk-b-ErrorText">
      There is an error on this field.
    </div>
  </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" data-id="checkbox-error-1">

    <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" data-id="checkbox-error-2">

    <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" data-id="checkbox-error-3">

    <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" data-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">Checkbox Item 1</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="checkbox-normal-2" data-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">Checkbox Item 2</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="checkbox-normal-3" data-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">Checkbox Item 3</label>
    </div>
  </fieldset>
  <div class="sprk-b-ErrorContainer" 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" data-id="checkbox-1">

    <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" data-id="checkbox-2">

    <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" data-id="checkbox-3">

    <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" data-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">Radio Item 1</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="radio-normal-2" data-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">Radio Item 2</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="radio-normal-3" data-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">Radio Item 3</label>
    </div>
  </fieldset>
  <div class="sprk-b-ErrorContainer" 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" data-id="radio-1">
    <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" data-id="radio-2">
    <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" data-id="radio-3">
    <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" data-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">Radio Item 1</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="radio-error-2" data-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">Radio Item 2</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="radio-error-3" data-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">Radio Item 3</label>
    </div>
  </fieldset>
  <div class="sprk-b-ErrorContainer" id="radio-error--error-container">
    <svg class="sprk-c-Icon sprk-c-Icon--m sprk-b-ErrorIcon" viewBox="0 0 64 64">
      <use xlink:href="#exclamation-filled" />
    </svg>
    <div class="sprk-b-ErrorText">
      There is an error on this field.
    </div>
  </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" data-id="radio-error-1">
    <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" data-id="radio-error-2">
    <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" data-id="radio-error-3">
    <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" data-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">Radio Item 1</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="radio-disabled-2" data-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">Radio Item 2</label>
    </div>
    <div class="sprk-b-SelectionContainer">
      <input id="radio-disabled-3" data-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">Radio Item 3</label>
    </div>
  </fieldset>
  <div class="sprk-b-ErrorContainer" 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 data-id="radio-disabled-1">
    <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 data-id="radio-disabled-2">
    <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 data-id="radio-disabled-3">
    <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">
  <select class="sprk-b-Select" id="select-normal" data-id="select-normal" aria-describedby="select-normal--error-container" data-sprk-input="select">
    <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-InputContainer__input-border"></div>
  <svg class="sprk-c-Icon sprk-c-Icon--current-color sprk-b-SelectContainer__icon" viewBox="0 0 64 64">
    <use xlink:href="#chevron-down" />
  </svg>
  <label for="select-normal" class="sprk-b-Label">Select Box Label</label>
  <div class="sprk-b-ErrorContainer" id="text-input-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" data-id="select-1" 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">
  <select class="sprk-b-Select sprk-b-Select--error" id="select-error" data-id="select-error" aria-describedby="select-error--error-container" data-sprk-input="select">
    <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-InputContainer__input-border"></div>
  <svg class="sprk-c-Icon sprk-c-Icon--current-color sprk-b-SelectContainer__icon" viewBox="0 0 64 64">
    <use xlink:href="#chevron-down" />
  </svg>
  <label for="select-error" class="sprk-b-Label">Select Box Label</label>
  <div class="sprk-b-ErrorContainer" id="select-error--error-container">
    <svg class="sprk-c-Icon sprk-c-Icon--m sprk-b-ErrorIcon" viewBox="0 0 64 64">
      <use xlink:href="#exclamation-filled" />
    </svg>
    <div class="sprk-b-ErrorText">
      There is an error on this field.
    </div>
  </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" data-id="select-error-1" 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">
  <select class="sprk-b-Select" id="select-disabled" data-id="select-disabled" aria-describedby="select-disabled--error-container" disabled data-sprk-input="select">
    <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-InputContainer__input-border"></div>
  <svg class="sprk-c-Icon sprk-c-Icon--current-color sprk-b-SelectContainer__icon" viewBox="0 0 64 64">
    <use xlink:href="#chevron-down" />
  </svg>
  <label for="select-disabled" class="sprk-b-Label">Select Box Label</label>
  <div class="sprk-b-ErrorContainer" 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" data-id="select-disabled-1" 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" data-id="textarea-error" aria-describedby="textarea-error--error-container" aria-invalid="true" data-sprk-input="text"></textarea>
  <div class="sprk-b-InputContainer__input-border"></div>
  <div class="sprk-b-ErrorContainer" id="textarea-error--error-container">
    <svg class="sprk-c-Icon sprk-c-Icon--m sprk-b-ErrorIcon" viewBox="0 0 64 64">
      <use xlink:href="#exclamation-filled" />
    </svg>
    <div class="sprk-b-ErrorText">
      There is an error on this field.
    </div>
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Description</label>
  <textarea name="textarea_input" [(ngModel)]="textarea_input" #textareaInput="ngModel" data-id="textarea-error-1" 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" data-id="textarea-disabled" aria-describedby="textarea-disabled--error-container" disabled data-sprk-input="text"></textarea>
  <div class="sprk-b-InputContainer__input-border"></div>
  <div class="sprk-b-ErrorContainer" id="textarea-disabled--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Description</label>
  <textarea disabled name="textarea_input" [(ngModel)]="textarea_input" #textareaInput="ngModel" data-id="textarea-disabled-1" 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" data-id="textarea-normal" aria-describedby="textarea-normal--error-container" data-sprk-input="text"></textarea>
  <div class="sprk-b-InputContainer__input-border"></div>
  <div class="sprk-b-ErrorContainer" id="textarea-normal--error-container">
  </div>
</div>
          
<sprk-textarea-container>
  <label sprkLabel>Description</label>
  <textarea name="textarea_input" [(ngModel)]="textarea_input" #textareaInput="ngModel" data-id="textarea-1" sprkInput></textarea>
</sprk-textarea-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">
  <input class="sprk-b-TextInput sprk-u-Width-100" id="ssn-normal" data-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" data-sprk-input="text">
  <div class="sprk-b-InputContainer__input-border"></div>
  <label for="ssn-normal" class="sprk-b-Label">Social Security #</label>
  <div class="sprk-b-SelectionContainer sprk-b-InputContainer__visibility-toggle">
    <input id="ssn-normal-show-ssn" type="checkbox" data-id="ssn-normal-show-ssn">
    <label for="ssn-normal-show-ssn" class="sprk-b-Label sprk-b-Label--inline">Show SSN</label>
  </div>
  <div class="sprk-b-ErrorContainer" id="ssn-normal--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>SSN Input</label>
  <input [type]="ssnType" [ngClass]="{ 'sprk-b-TextInput--error': ssnInput.invalid && ssnInput.dirty }" 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" data-id="ssn-1" sprkFormatterSsn sprkInput>
  <sprk-selection-item-container>
    <input type="checkbox" sprkSelectionInput (click)="toggleSSNType()" data-id="ssn-reveal-3">
    <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">
  <input class="sprk-b-TextInput sprk-b-TextInput--error sprk-u-Width-100" id="ssn-error" data-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" data-sprk-input="text">
  <div class="sprk-b-InputContainer__input-border"></div>
  <label for="ssn-error" class="sprk-b-Label">Social Security #</label>
  <div class="sprk-b-SelectionContainer sprk-b-InputContainer__visibility-toggle">
    <input id="ssn-error-show-ssn" type="checkbox" data-id="ssn-error-show-ssn">
    <label for="ssn-error-show-ssn" class="sprk-b-Label sprk-b-Label--inline">Show SSN</label>
  </div>
  <div class="sprk-b-ErrorContainer" id="ssn-error--error-container">
    <svg class="sprk-c-Icon sprk-c-Icon--m sprk-b-ErrorIcon" viewBox="0 0 64 64">
      <use xlink:href="#exclamation-filled" />
    </svg>
    <div class="sprk-b-ErrorText">
      There is an error on this field.
    </div>
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>SSN Input</label>
  <input [type]="ssnType" [ngClass]="{ 'sprk-b-TextInput--error': ssnInput.invalid && ssnInput.dirty }" 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" data-id="ssn-error-1" sprkFormatterSsn sprkInput>
  <sprk-selection-item-container>
    <input type="checkbox" sprkSelectionInput (click)="toggleSSNType()" data-id="ssn-reveal-2">
    <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">
  <input class="sprk-b-TextInput sprk-u-Width-100" id="ssn-disabled" data-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 data-sprk-input="text">
  <div class="sprk-b-InputContainer__input-border"></div>
  <label for="ssn-disabled" class="sprk-b-Label">Social Security #</label>
  <div class="sprk-b-SelectionContainer sprk-b-InputContainer__visibility-toggle">
    <input id="ssn-disabled-show-ssn" type="checkbox" data-id="ssn-disabled-show-ssn" disabled>
    <label for="ssn-disabled-show-ssn" class="sprk-b-Label sprk-b-Label--inline">Show SSN</label>
  </div>
  <div class="sprk-b-ErrorContainer" id="ssn-disabled--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>SSN Input</label>
  <input [type]="ssnType" [ngClass]="{ 'sprk-b-TextInput--error': ssnInput.invalid && ssnInput.dirty }" 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" data-id="ssn-disabled-1" sprkFormatterSsn sprkInput disabled>
  <sprk-selection-item-container>
    <input type="checkbox" sprkSelectionInput (click)="toggleSSNType()" data-id="ssn-reveal-1">
    <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">
  <input class="sprk-b-TextInput sprk-u-Width-100" id="search-normal" data-id="search-normal" type="search" role="search" aria-describedby="search-normal--error-container" data-sprk-input="text">
  <div class="sprk-b-InputContainer__input-border"></div>
  <label for="search-normal" class="sprk-b-Label">Search</label>
  <div class="sprk-b-ErrorContainer" 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" data-id="search-1" 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">
  <input class="sprk-b-TextInput sprk-b-TextInput--error sprk-u-Width-100" id="search-error" data-id="search-error" type="search" role="search" aria-describedby="search-error--error-container" aria-invalid="true" data-sprk-input="text">
  <div class="sprk-b-InputContainer__input-border"></div>
  <label for="search-error" class="sprk-b-Label">Search</label>
  <div class="sprk-b-ErrorContainer" id="search-error--error-container">
    <svg class="sprk-c-Icon sprk-c-Icon--m sprk-b-ErrorIcon" viewBox="0 0 64 64">
      <use xlink:href="#exclamation-filled" />
    </svg>
    <div class="sprk-b-ErrorText">
      There is an error on this field.
    </div>
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Search Input</label>
  <input name="search_input" type="search" [(ngModel)]="search_input" #searchInput="ngModel" data-id="search-error-1" sprkInput>
</sprk-input-container>

Search Input - Disabled State

This input is used for entering search queries.

<div class="sprk-b-InputContainer">
  <input class="sprk-b-TextInput sprk-u-Width-100" id="search-disabled" data-id="search-disabled" type="search" role="search" aria-describedby="search-disabled--error-container" disabled data-sprk-input="text">
  <div class="sprk-b-InputContainer__input-border"></div>
  <label for="search-disabled" class="sprk-b-Label">Search</label>
  <div class="sprk-b-ErrorContainer" 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 data-id="search-disabled-1">
</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">
  <div class="sprk-b-TextInputIconContainer">
    <svg class="sprk-c-Icon sprk-c-Icon--m sprk-c-Icon--current-color sprk-b-InlineSearch__icon" viewBox="0 0 64 64">
      <use xlink:href="#search" />
    </svg>
    <input class="sprk-b-TextInput sprk-b-TextInput--with-icon sprk-u-pll sprk-u-Width-100" id="search-normal" data-id="search-normal" type="text" placeholder="Search" aria-describedby="search-normal--error-container" data-sprk-input="text">
    <div class="sprk-b-InputContainer__input-border"></div>
    <label for="search-normal" class="sprk-b-Label sprk-b-Label--with-icon sprk-u-ScreenReaderText">Search</label>
  </div>
  <div class="sprk-b-ErrorContainer" id="search-normal--error-container">
  </div>
</div>
          
<sprk-icon-input-container iconContainerClasses="">
  <label class="sprk-b-Label--with-icon sprk-u-ScreenReaderText" sprkLabel>
    Search
  </label>
  <sprk-icon iconType="search" additionalClasses="sprk-b-InlineSearch__icon sprk-c-Icon--current-color" sprk-input-icon></sprk-icon>
  <input name="inline_search_input" class="sprk-b-TextInput--with-icon" type="text" placeholder="Search" [(ngModel)]="inline_search_input" #inlineSearchInput="ngModel" data-id="input-search-1" sprkInput>
</sprk-icon-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">
  <div class="sprk-b-TextInputIconContainer">
    <svg class="sprk-c-Icon sprk-c-Icon--m sprk-c-Icon--current-color sprk-b-InlineSearch__icon" viewBox="0 0 64 64">
      <use xlink:href="#search" />
    </svg>
    <input class="sprk-b-TextInput sprk-b-TextInput--with-icon sprk-u-pll sprk-b-TextInput--error sprk-u-Width-100" id="inline-search-error" data-id="inline-search-error" type="text" placeholder="Search" aria-invalid="true" aria-describedby="inline-search-error--error-container" data-sprk-input="text">
    <div class="sprk-b-InputContainer__input-border"></div>
    <label for="inline-search-error" class="sprk-b-Label sprk-b-Label--with-icon sprk-u-ScreenReaderText">Search</label>
  </div>
  <div class="sprk-b-ErrorContainer" id="inline-search-error--error-container">
    <svg class="sprk-c-Icon sprk-c-Icon--m sprk-b-ErrorIcon" viewBox="0 0 64 64">
      <use xlink:href="#exclamation-filled" />
    </svg>
    <div class="sprk-b-ErrorText">
      There is an error on this field.
    </div>
  </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" data-id="input-error-1" 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">
  <div class="sprk-b-TextInputIconContainer">
    <svg class="sprk-c-Icon sprk-c-Icon--m sprk-c-Icon--current-color sprk-b-InlineSearch__icon" viewBox="0 0 64 64">
      <use xlink:href="#search" />
    </svg>
    <input class="sprk-b-TextInput sprk-b-TextInput--with-icon sprk-u-pll sprk-u-Width-100" id="inline-search-disabled" data-id="inline-search-disabled" type="text" placeholder="Search" aria-describedby="inline-search-disabled--error-container" disabled data-sprk-input="text">
    <div class="sprk-b-InputContainer__input-border"></div>
    <label for="inline-search-disabled" class="sprk-b-Label sprk-b-Label--with-icon sprk-u-ScreenReaderText">Search</label>
  </div>
  <div class="sprk-b-ErrorContainer" 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" data-id="input-disabled-1" 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">
  <div class="sprk-b-TextInputIconContainer sprk-b-TextInputIconContainer--monetary">
    <input class="sprk-b-TextInput sprk-b-TextInput--monetary  sprk-u-Width-100" pattern="(^\$?(\d+|\d{1,3}(,\d{3})*)(\.\d+)?$)|^$" id="monetary-disabled" data-id="monetary-disabled" type="tel" aria-describedby="monetary-disabled--error-container" disabled data-sprk-input="text">
    <div class="sprk-b-InputContainer__input-border"></div>
    <label for="monetary-disabled" class="sprk-b-Label sprk-b-Label--monetary">Payment</label>
  </div>
  <div class="sprk-b-ErrorContainer" id="monetary-disabled--error-container">
  </div>
</div>
          
<sprk-input-container iconContainerClasses="sprk-b-TextInputIconContainer sprk-b-TextInputIconContainer--monetary">
  <label class="sprk-b-Label--monetary" sprkLabel>
    Payment
  </label>
  <input name="monetary_input" type="text" [ngClass]="{ 'sprk-b-TextInput--error': monetaryInput.invalid && monetaryInput.dirty, 'sprk-u-plm': true }" pattern="(^\\$?(\\d+|\\d{1,3}(,\\d{3})*)(\\.\\d+)?$)|^$" [(ngModel)]="monetary_input" #monetaryInput="ngModel" data-id="monetary-disabled-1" 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">
  <div class="sprk-b-TextInputIconContainer sprk-b-TextInputIconContainer--monetary">
    <input class="sprk-b-TextInput sprk-b-TextInput--monetary sprk-b-TextInput--error  sprk-u-Width-100" pattern="(^\$?(\d+|\d{1,3}(,\d{3})*)(\.\d+)?$)|^$" id="monetary-error" data-id="monetary-error" type="tel" aria-describedby="monetary-error--error-container" aria-invalid="true" data-sprk-input="text">
    <div class="sprk-b-InputContainer__input-border"></div>
    <label for="monetary-error" class="sprk-b-Label sprk-b-Label--monetary">Payment</label>
  </div>
  <div class="sprk-b-ErrorContainer" id="monetary-error--error-container">
    <svg class="sprk-c-Icon sprk-c-Icon--m sprk-b-ErrorIcon" viewBox="0 0 64 64">
      <use xlink:href="#exclamation-filled" />
    </svg>
    <div class="sprk-b-ErrorText">
      There is an error on this field.
    </div>
  </div>
</div>
          
<sprk-input-container iconContainerClasses="sprk-b-TextInputIconContainer sprk-b-TextInputIconContainer--monetary">
  <label class="sprk-b-Label--monetary" sprkLabel>
    Payment
  </label>
  <input name="monetary_input" type="text" [ngClass]="{ 'sprk-b-TextInput--error': monetaryInput.invalid && monetaryInput.dirty, 'sprk-u-plm': true }" pattern="(^\\$?(\\d+|\\d{1,3}(,\\d{3})*)(\\.\\d+)?$)|^$" [(ngModel)]="monetary_input" #monetaryInput="ngModel" data-id="monetary-error-1" 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">
  <div class="sprk-b-TextInputIconContainer sprk-b-TextInputIconContainer--monetary">
    <input class="sprk-b-TextInput sprk-b-TextInput--monetary  sprk-u-Width-100" pattern="(^\$?(\d+|\d{1,3}(,\d{3})*)(\.\d+)?$)|^$" id="monetary-normal" data-id="monetary-normal" type="tel" aria-describedby="monetary-normal--error-container" data-sprk-input="text">
    <div class="sprk-b-InputContainer__input-border"></div>
    <label for="monetary-normal" class="sprk-b-Label sprk-b-Label--monetary">Payment</label>
  </div>
  <div class="sprk-b-ErrorContainer" id="monetary-normal--error-container">
  </div>
</div>
          
<sprk-icon-input-container iconContainerClasses="sprk-b-TextInputIconContainer sprk-b-TextInputIconContainer--monetary">
  <label class="sprk-b-Label--monetary" sprkLabel>
    Payment
  </label>
  <input name="monetary_input" type="text" [ngClass]="{ 'sprk-b-TextInput--error': monetaryInput.invalid && monetaryInput.dirty, 'sprk-u-plm': true }" pattern="(^\\$?(\\d+|\\d{1,3}(,\\d{3})*)(\\.\\d+)?$)|^$" [(ngModel)]="monetary_input" #monetaryInput="ngModel" data-id="input-monetary-1" sprkFormatterMonetary sprkInput>
  <div [hidden]="monetaryInput.valid || monetaryInput.pristine" sprkFieldError>
    Invalid amount.
  </div>
</sprk-icon-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">
  <input class="sprk-b-TextInput sprk-b-TextInput--error sprk-u-Width-100" id="password-error" data-id="password-error" type="password" aria-describedby="password-error--error-container" aria-invalid="true" data-sprk-input="text">
  <label for="password-error" class="sprk-b-Label">Password</label>
  <div class="sprk-b-InputContainer__input-border"></div>
  <div class="sprk-b-SelectionContainer sprk-b-InputContainer__visibility-toggle">
    <input id="password-error-show-password" type="checkbox" data-id="password-error-show-password">
    <label for="password-error-show-password" class="sprk-b-Label sprk-b-Label--inline">Show Password</label>
  </div>
  <div class="sprk-b-ErrorContainer" id="password-error--error-container">
    <svg class="sprk-c-Icon sprk-c-Icon--m sprk-b-ErrorIcon" viewBox="0 0 64 64">
      <use xlink:href="#exclamation-filled" />
    </svg>
    <div class="sprk-b-ErrorText">
      There is an error on this field.
    </div>
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Password</label>
  <input [type]="passwordType" name="password_input" data-id="password-entry-1" sprkInput>
  <sprk-selection-item-container>
    <input type="checkbox" sprkSelectionInput (click)="togglePasswordType()" data-id="password-reveal-1">
    <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">
  <input class="sprk-b-TextInput sprk-u-Width-100" id="password-disabled" data-id="password-disabled" type="password" aria-describedby="password-disabled--error-container" disabled data-sprk-input="text">
  <label for="password-disabled" class="sprk-b-Label">Password</label>
  <div class="sprk-b-InputContainer__input-border"></div>
  <div class="sprk-b-SelectionContainer sprk-b-InputContainer__visibility-toggle">
    <input id="password-disabled-show-password" type="checkbox" data-id="password-disabled-show-password" disabled>
    <label for="password-disabled-show-password" class="sprk-b-Label sprk-b-Label--inline">Show Password</label>
  </div>
  <div class="sprk-b-ErrorContainer" 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()" data-id="password-disabled-1" 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">
  <input class="sprk-b-TextInput sprk-u-Width-100" id="password-normal" data-id="password-normal" type="password" aria-describedby="password-normal--error-container" data-sprk-input="text">
  <label for="password-normal" class="sprk-b-Label">Password</label>
  <div class="sprk-b-InputContainer__input-border"></div>
  <div class="sprk-b-SelectionContainer sprk-b-InputContainer__visibility-toggle">
    <input id="password-normal-show-password" type="checkbox" data-id="password-normal-show-password">
    <label for="password-normal-show-password" class="sprk-b-Label sprk-b-Label--inline">Show Password</label>
  </div>
  <div class="sprk-b-ErrorContainer" id="password-normal--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Password</label>
  <input [type]="passwordType" name="password_input" data-id="password-2" sprkInput>
  <sprk-selection-item-container>
    <input type="checkbox" sprkSelectionInput (click)="togglePasswordType()" data-id="password-reveal-2">
    <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">
  <input class="sprk-b-TextInput sprk-u-Width-100" id="text-input-helper" data-id="text-input-helper" type="text" aria-describedby="text-input-helper--error-container" aria-invalid="true" data-sprk-input="text">
  <div class="sprk-b-InputContainer__input-border"></div>
  <label for="text-input-helper" class="sprk-b-Label">Text Input Label</label>
  <div class="sprk-b-ErrorContainer" id="text-input-helper--error-container">
    <div class="sprk-b-HelperText">
      Optional helper text, used to clarify the field&#x27;s intent.
    </div>
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>
    Text Input Label
  </label>

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

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

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">
  <input class="sprk-b-TextInput sprk-u-Width-100" id="phone-number-disabled" data-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 data-sprk-input="text">
  <div class="sprk-b-InputContainer__input-border"></div>
  <label for="phone-number-disabled" class="sprk-b-Label">Phone Number</label>
  <div class="sprk-b-ErrorContainer" id="phone-number-disabled--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Phone Number *</label>
  <input name="phone_input" [ngClass]="{ 'sprk-b-TextInput--error': phoneInput.invalid && phoneInput.dirty }" 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" data-id="phone-disabled-1" 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">
  <input class="sprk-b-TextInput sprk-u-Width-100" id="phone-input-normal" data-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" data-sprk-input="text">
  <div class="sprk-b-InputContainer__input-border"></div>
  <label for="phone-input-normal" class="sprk-b-Label">Phone Number</label>
  <div class="sprk-b-ErrorContainer" id="phone-input-normal--error-container">
  </div>
</div>
          
<sprk-icon-input-container>
  <label sprkLabel>Phone Number *</label>
  <input name="phone_input" [ngClass]="{ 'sprk-b-TextInput--error': phoneInput.invalid && phoneInput.dirty }" 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" data-id="input-phone-1" sprkFormatterPhoneNumber sprkInput>
  <span [hidden]="phoneInput.valid || phoneInput.pristine" sprkFieldError>
  </span>
</sprk-icon-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">
  <input class="sprk-b-TextInput sprk-b-TextInput--error sprk-u-Width-100" id="phone-number-error" data-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" data-sprk-input="text">
  <div class="sprk-b-InputContainer__input-border"></div>
  <label for="phone-number-error" class="sprk-b-Label">Phone Number</label>
  <div class="sprk-b-ErrorContainer" id="phone-number-error--error-container">
    <svg class="sprk-c-Icon sprk-c-Icon--m sprk-b-ErrorIcon" viewBox="0 0 64 64">
      <use xlink:href="#exclamation-filled" />
    </svg>
    <div class="sprk-b-ErrorText">
      There is an error on this field.
    </div>
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Phone Number *</label>
  <input name="phone_input" [ngClass]="{ 'sprk-b-TextInput--error': phoneInput.invalid && phoneInput.dirty }" 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" data-id="phone-error-1" 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">
  <input class="sprk-b-TextInput sprk-u-Width-100" id="date-input-normal" data-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" data-sprk-input="text">
  <div class="sprk-b-InputContainer__input-border"></div>
  <label for="date-input-normal" class="sprk-b-Label">Date</label>
  <div class="sprk-b-ErrorContainer" id="date-input-normal--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Date</label>
  <input name="date_input" [ngClass]="{ 'sprk-b-TextInput--error': dateInput.invalid && dateInput.dirty }" 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" data-id="input-date-1" 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">
  <input class="sprk-b-TextInput sprk-b-TextInput--error sprk-u-Width-100" id="date-input-error" data-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" data-sprk-input="text">
  <div class="sprk-b-InputContainer__input-border"></div>
  <label for="date-input-error" class="sprk-b-Label">Date</label>
  <div class="sprk-b-ErrorContainer" id="date-input-error--error-container">
    <svg class="sprk-c-Icon sprk-c-Icon--m sprk-b-ErrorIcon" viewBox="0 0 64 64">
      <use xlink:href="#exclamation-filled" />
    </svg>
    <div class="sprk-b-ErrorText">
      There is an error on this field.
    </div>
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Date</label>
  <input name="date_input" [ngClass]="{ 'sprk-b-TextInput--error': dateInput.invalid && dateInput.dirty }" 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" data-id="input-date-error-1" 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">
  <input class="sprk-b-TextInput sprk-u-Width-100" id="date-input-disabled" data-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 data-sprk-input="text">
  <div class="sprk-b-InputContainer__input-border"></div>
  <label for="date-input-disabled" class="sprk-b-Label">Date</label>
  <div class="sprk-b-ErrorContainer" id="date-input-disabled--error-container">
  </div>
</div>
          
<sprk-input-container>
  <label sprkLabel>Date</label>
  <input disabled name="date_input" [ngClass]="{ 'sprk-b-TextInput--error': dateInput.invalid && dateInput.dirty }" 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" data-id="input-date-disabled-1" 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>
  <div class="sprk-b-TextInputIconContainer">
    <svg class="sprk-c-Icon sprk-c-Icon--current-color sprk-b-DatePicker__icon" viewBox="0 0 64 64">
      <use xlink:href="#calendar" />
    </svg>
    <input class="sprk-b-TextInput sprk-b-TextInput--with-icon sprk-u-pll sprk-b-TextInput--error sprk-u-Width-100" id="datepicker-error" data-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" data-sprk-input="text">
    <div class="sprk-b-InputContainer__input-border"></div>
    <label for="datepicker-error" class="sprk-b-Label sprk-b-Label--with-icon">Date</label>
  </div>
  <div class="sprk-b-ErrorContainer" id="datepicker-error--error-container">
    <svg class="sprk-c-Icon sprk-c-Icon--m sprk-b-ErrorIcon" viewBox="0 0 64 64">
      <use xlink:href="#exclamation-filled" />
    </svg>
    <div class="sprk-b-ErrorText">
      There is an error on this field.
    </div>
  </div>
</div>
          
<sprk-input-container iconContainerClasses="sprk-b-TextInputIconContainer">
  <label class="sprk-b-Label--with-icon" sprkLabel>
    Date Input (picker)
  </label>
  <sprk-icon iconType="calendar" additionalClasses="sprk-c-Icon--current-color" sprk-input-icon></sprk-icon>
  <input name="datepicker_input" type="text" [ngClass]="{ 'sprk-b-TextInput--error': datepickerInput.invalid && datepickerInput.dirty, 'sprk-u-pll': true }" 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" data-id="datepicker-error-1" 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>
  <div class="sprk-b-TextInputIconContainer">
    <svg class="sprk-c-Icon sprk-c-Icon--current-color sprk-b-DatePicker__icon" viewBox="0 0 64 64">
      <use xlink:href="#calendar" />
    </svg>
    <input class="sprk-b-TextInput sprk-b-TextInput--with-icon sprk-u-pll sprk-u-Width-100" id="datepicker-disabled" data-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 data-sprk-input="text">
    <div class="sprk-b-InputContainer__input-border"></div>
    <label for="datepicker-disabled" class="sprk-b-Label sprk-b-Label--with-icon">Date</label>
  </div>
  <div class="sprk-b-ErrorContainer" id="datepicker-disabled--error-container">
  </div>
</div>
          
<sprk-input-container iconContainerClasses="sprk-b-TextInputIconContainer">
  <label class="sprk-b-Label--with-icon" sprkLabel>
    Date Input (picker)
  </label>
  <sprk-icon iconType="calendar" additionalClasses="sprk-c-Icon--current-color" sprk-input-icon></sprk-icon>
  <input disabled name="datepicker_input" type="text" [ngClass]="{ 'sprk-b-TextInput--error': datepickerInput.invalid && datepickerInput.dirty, 'sprk-u-pll': true }" 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" data-id="datepicker-disabled-1" 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>
  <div class="sprk-b-TextInputIconContainer">
    <svg class="sprk-c-Icon sprk-c-Icon--current-color sprk-b-DatePicker__icon" viewBox="0 0 64 64">
      <use xlink:href="#calendar" />
    </svg>
    <input class="sprk-b-TextInput sprk-b-TextInput--with-icon sprk-u-pll sprk-u-Width-100" id="datepicker-normal" data-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" data-sprk-input="text">
    <div class="sprk-b-InputContainer__input-border"></div>
    <label for="datepicker-normal" class="sprk-b-Label sprk-b-Label--with-icon">Date</label>
  </div>
  <div class="sprk-b-ErrorContainer" id="datepicker-normal--error-container">
  </div>
</div>
          
<sprk-input-container iconContainerClasses="sprk-b-TextInputIconContainer">
  <label class="sprk-b-Label--with-icon" sprkLabel>
    Date
  </label>
  <sprk-icon iconType="calendar" additionalClasses="sprk-c-Icon--current-color" sprk-input-icon></sprk-icon>
  <input name="datepicker_input" type="text" [ngClass]="{ 'sprk-b-TextInput--error': datepickerInput.invalid && datepickerInput.dirty, 'sprk-u-pll': true }" 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" data-id="datepicker-1" 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.

See below for customization options available for sprkDatePicker:

Input Type Description
sprkDatePickerConfig object Exposes configuration provided by tiny-date-picker, see github for documentation.
State Selection