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.
  • In Vanilla JS applications, if an input is required only, meaning that no validation is needed aside from a value being supplied, you can add the data-sprk-required-only attribute. The values that are available are 'text', 'select', and 'tick'. Text is for any input that accepts text as a value, Select is only for select inputs, and Tick is for radio buttons or checkboxes.

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).

Configurable Variables

Variable Default Description
$sprk-monetary-symbol $ The symbol used to denote currency.
$sprk-fieldset-padding $sprk-space-m 0 0 0 The value for padding applied to the fieldset element.
$sprk-input-container-margin 0 0 2rem 0 The value used for margin around input containers.
$sprk-input-max-width 27.5rem The value used as a maximum width for input containers.
$sprk-text-input-font-family $sprk-font-family-body-two The font family to use for inputs.
$sprk-text-input-font-size 1rem The font size to use for inputs.
$sprk-text-input-font-weight 300 The font weight to use for inputs.
$sprk-text-input-height 48px The height of text input elements.
$sprk-text-input-line-height 1.2 The line height to use for inputs.
$sprk-text-input-outline 0 The value to use for outline on text inputs.
$sprk-text-input-color $sprk-black The color of the text inside input elements.
$sprk-text-input-border 2px solid $sprk-black-tint-25 The border around text input elements.
$sprk-text-input-border-radius 4px The border radius to use for text input elements.
$sprk-text-input-box-shadow none The box shadow to use for text input elements.
$sprk-text-input-padding 12px 13px The padding inside of text input elements.
$sprk-text-input-focus-border-color $sprk-green The border color when input elements receive focus.
$sprk-text-input-error-border-color $sprk-yellow The border color when input elements are in an error state.
$sprk-text-input-disabled-border-color $sprk-gray-dark The border color when an input element is disabled.
$sprk-text-input-disabled-background-color $sprk-gray-dark The background color when an input element is disabled.
$sprk-text-input-disabled-box-shadow none The box shadow when an input element is disabled.
$sprk-text-input-disabled-color $sprk-black-tint-50 The color of the text when an input element is disabled.
$sprk-text-input-readonly-border-color $sprk-black-tint-25 The border color when a text input is readonly.
$sprk-text-input-readonly-color $sprk-gray The text color when a text input is readonly.
$sprk-text-input-transition border-color 0.15s ease The transition applied to text input elements.
$sprk-select-appearance none The value set to the appearance property of select elements.
$sprk-select-background none The value set to the background property of select elements.
$sprk-select-border $sprk-text-input-border The border style applied to select elements.
$sprk-select-focus-border-color $sprk-text-input-focus-border-color The border color when select elements receive focus.
$sprk-select-error-border-color $sprk-text-input-error-border-color The border color when select elements are in an error state.
$sprk-select-border-radius $sprk-text-input-border-radius The border radius applied to select elements.
$sprk-select-box-shadow $sprk-text-input-box-shadow The box shadow applied to select elements.
$sprk-select-color $sprk-text-input-color The color of the text in select elements.
$sprk-select-font-size $sprk-text-input-font-size The font size for text in select elements.
$sprk-select-font-family $sprk-text-input-font-family The font family for text in select elements.
$sprk-select-font-weight $sprk-text-input-font-weight The font weight for text in select elements.
$sprk-select-line-height $sprk-text-input-line-height The line height for text in select elements.
$sprk-select-outline $sprk-text-input-outline The outline applied to select elements.
$sprk-select-padding 14px 45px 14px 13px The padding applied to select elements.
$sprk-select-arrow-offset-y -37px The offset that is applied to the y-axis of the chevron icon on select elements.
$sprk-select-arrow-offset-x 8px The offset that is applied to the x-axis of the chevron icon on select elements.
$sprk-select-arrow-stroke-width 6px The stroke-width applied to the chevron icon of select elements.
$sprk-select-disabled-border-color $sprk-text-input-disabled-border-color The border color when select elements are disabled.
$sprk-select-disabled-background-color $sprk-text-input-disabled-background-color The background-color applied to disabled select elements.
$sprk-select-disabled-color $sprk-text-input-disabled-color The color of the text of disabled select elements.
$sprk-textarea-min-height 125px The minimum height of textarea elements.
$sprk-textarea-margin $sprk-space-stack-m The margin surrounding textarea elements.
$sprk-textarea-padding $sprk-space-stack-m The padding inside textarea elements.
$sprk-text-input-error-color $sprk-yellow The color used generally by input errors.
$sprk-input-error-text-color $sprk-black The color of the text in input errors.
$sprk-input-error-text-font-family $sprk-font-family-body-two The font family used for input error text.
$sprk-input-error-text-font-weight 400 The font weight used for input error text.
$sprk-input-error-text-font-size 0.8125rem The font size used for input error text.
$sprk-input-error-text-line-height 1.2 The line-height used for input error text.
$sprk-input-error-text-margin 0 0 0 6px The margin surrounding input error text.
$sprk-error-container-margin 8px 0 0 0 The margin surrounding input error containers.
$sprk-error-icon-size 1.25rem The input error icon size.
$sprk-helper-color $sprk-black-tint-50 The color of the helper text.
$sprk-helper-font-size 0.8125rem The font size of the helper text.
$sprk-helper-font-family $sprk-text-input-font-family The font family used for helper text.
$sprk-helper-font-weight $sprk-text-input-font-weight The font weight used for helper text.
$sprk-helper-line-height $sprk-text-input-line-height The line height used for helper text.
$sprk-helper-margin $sprk-error-container-margin The margin surrounding helper text.
$sprk-placeholder-color $sprk-black-tint-50 The color of placeholder text.
$sprk-placeholder-font-size $sprk-text-input-font-size The font size of placeholder text.
$sprk-placeholder-font-family $sprk-text-input-font-family The font family used for placeholder text.
$sprk-placeholder-font-weight $sprk-text-input-font-weight The font weight used for placeholder text.
$sprk-selection-container-margin 0.5rem 0 The margin surrounding selection containers.
$sprk-selection-container-label-font-weight 300 The font weight used for selection container labels.
$sprk-selection-container-input-height 20px The height of inputs inside selection containers.
$sprk-selection-container-input-width 20px The width of inputs inside selection containers.
$sprk-selection-container-input-margin 0 4px 0 0 The margin surrounding inputs inside selection containers.
$sprk-date-picker-max-width 20rem The maximum width of the datepicker modal.
$sprk-date-picker-border-radius 4px The border radius applied to the datepicker modal.
$sprk-date-picker-button-size 2.25rem The size of the buttons used internally by datepicker.
$sprk-date-picker-column-adjustment-x 0.25rem The offset applied to columns used internally by datepicker.
$sprk-date-picker-box-shadow 0 4px 16px rgba(51, 51, 51, 0.1) The box shadow applied to the datepicker modal.
$sprk-date-picker-font-size 0.9375rem The font size used for the datepicker modal.
$sprk-date-picker-font-family sprk-font-family-body-two The font family used by the datepicker modal.
$sprk-date-picker-font-weight 300 The font weight used by the datepicker modal.
$sprk-date-picker-selected-day-font-weight 500 The font weight used by the currently selected day in the datepicker modal.
$sprk-date-picker-day-interact-color The color used internally by datepicker to highlight elements.
$sprk-date-picker-background $sprk-white
$sprk-date-picker-padding $sprk-space-inset-s
$sprk-date-picker-padding-wide $sprk-space-inset-m
$sprk-date-picker-header-border 1px solid $sprk-gray
$sprk-date-picker-header-font-size $sprk-font-size-body-three
$sprk-date-picker-header-font-weight 700
$sprk-date-picker-header-padding 0 0 $sprk-space-s 0
$sprk-date-picker-col-header-padding 10px
$sprk-date-picker-day-padding 6px
$sprk-date-picker-day-margin 0 2px
$sprk-date-picker-day-color $sprk-white
$sprk-date-picker-day-hover-color $sprk-black
$sprk-date-picker-day-edge-day-color $sprk-black-tint-50
$sprk-date-picker-month-year-font-size $sprk-font-size-display-six
$sprk-date-picker-arrow-color $sprk-black
$sprk-date-picker-modal-margin $sprk-space-m 0 0 0
$sprk-date-picker-modal-margin-wide 2px
$sprk-date-picker-modal-z-index $sprk-layer-height-m
$sprk-date-picker-years-modal-max-height 500px
$sprk-input-icon-offset-x $sprk-space-m The X offset of icons inside input elements.
$sprk-input-icon-offset-y $sprk-space-m The Y offset of icons inside input elements.
$sprk-text-input-has-icon-padding 12px 13px 12px 40px The padding inside input elements that contain icons.
$sprk-input-icon-z-index $sprk-layer-height-xs The z-index applied to the icon inside input elements.
$sprk-input-text-icon-offset-x $sprk-space-m The X offset of text icons inside input elements.
$sprk-input-text-icon-offset-y 38px The Y offset of text icons inside input elements.
$sprk-input-text-icon-font-size 1rem The font size of text icons inside input elements.
$sprk-input-text-icon-font-weight 700 The font weight of text icons inside input elements.
$sprk-text-input-has-text-icon-padding 12px 13px 12px 37px The padding inside input elements that contain text icons.
$sprk-input-text-icon-z-index $sprk-layer-height-xs The z-index applied to the text icon.
$sprk-label-padding 0 The padding applied to labels.
$sprk-label-font-family $sprk-font-family-body-two !default; The font family used for labels.
$sprk-label-font-size 0.875rem The font size used for labels.
$sprk-label-font-weight 400 The font weight used for labels.
$sprk-label-line-height 1.2 The line height used for labels.
$sprk-label-margin 0 0 $sprk-space-s 0 The margin surrounding labels.
$sprk-visibility-control-margin 6px 0 0 0 The margin surrounding visibility controls (i.e. 'Show SSN').
$sprk-visibility-control-label-font-size $sprk-label-font-size The font size used for visibility controls.
$sprk-label-disabled-color $sprk-gray-dark The color of the label when it is disabled.

Class Modifiers

Class Description
.sprk-b-Label--no-input Apply when a label is used without an input.
.sprk-b-Label--inline Used for inline labels.
.sprk-b-TextInput--has-value Text inputs that have a value.
.sprk-b-TextInput--focusin Text inputs that are currently in focus.
.sprk-b-Label--with-icon Labels that have an icon in them.
.sprk-b-Label--monetary For labels on monetary inputs.
.sprk-b-Select--error Adds select error styles.
.sprk-b-Select--focusin Selects that are currently in focus.
.sprk-b-Select--focusout Selects that are currently not in focus.
.sprk-b-TextInputIconContainer--monetary Monetary text inputs with icons.

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">
  <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" data-id="text-input-normal" type="text" value="" aria-describedby="text-input-normal--error-container">
</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">
  <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" data-id="text-input-error" type="text" value="" aria-describedby="text-input-error--error-container" aria-invalid="true">
  <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-small" />
    </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">
  <label for="text-input-disabled" class="sprk-b-Label sprk-b-Label--disabled">Text Input Label</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="text-input-disabled" data-id="text-input-disabled" type="text" value="disabled value" aria-describedby="text-input-disabled--error-container" disabled>
</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-small" />
    </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-small" />
    </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">
  <label for="select-normal" class="sprk-b-Label">Select Box Label</label>
  <select class="sprk-b-Select" id="select-normal" data-id="select-normal" aria-describedby="select-normal--error-container">
    <option value="not-selected">Make a selection...</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>
  <svg class="sprk-c-Icon sprk-c-Icon--stroke-current-color sprk-b-SelectContainer__icon" viewBox="0 0 64 64">
    <use xlink:href="#chevron-down" />
  </svg>
  <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">
  <label for="select-error" class="sprk-b-Label">Select Box Label</label>
  <select class="sprk-b-Select sprk-b-Select--error" id="select-error" data-id="select-error" aria-describedby="select-error--error-container">
    <option value="not-selected">Make a selection...</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>
  <svg class="sprk-c-Icon sprk-c-Icon--stroke-current-color sprk-b-SelectContainer__icon" viewBox="0 0 64 64">
    <use xlink:href="#chevron-down" />
  </svg>
  <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-small" />
    </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">
  <label for="select-disabled" class="sprk-b-Label sprk-b-Label--disabled">Select Box Label</label>
  <select class="sprk-b-Select" id="select-disabled" data-id="select-disabled" aria-describedby="select-disabled--error-container" disabled>
    <option value="not-selected">Make a selection...</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>
  <svg class="sprk-c-Icon sprk-c-Icon--stroke-current-color sprk-b-SelectContainer__icon" viewBox="0 0 64 64">
    <use xlink:href="#chevron-down" />
  </svg>
  <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-TextArea sprk-b-TextArea--error sprk-u-Width-100" id="textarea-error" data-id="textarea-error" aria-describedby="textarea-error--error-container" aria-invalid="true"></textarea>
  <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-small" />
    </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-TextArea sprk-u-Width-100" id="textarea-disabled" data-id="textarea-disabled" aria-describedby="textarea-disabled--error-container" disabled></textarea>
  <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-TextArea sprk-u-Width-100" id="textarea-normal" data-id="textarea-normal" aria-describedby="textarea-normal--error-container"></textarea>
  <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">
  <label for="ssn-normal" class="sprk-b-Label">Social Security #</label>
  <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">
  <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">
  <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" 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">
  <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-small" />
    </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">
  <label for="ssn-disabled" class="sprk-b-Label">Social Security #</label>
  <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>
  <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">
  <label for="search-normal" class="sprk-b-Label">Search</label>
  <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">
  <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">
  <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" data-id="search-error" type="search" role="search" aria-describedby="search-error--error-container" aria-invalid="true">
  <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-small" />
    </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">
  <label for="search-disabled" class="sprk-b-Label">Search</label>
  <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>
  <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">
  <label for="search-normal-inline" class="sprk-b-Label sprk-b-Label--with-icon sprk-u-ScreenReaderText">Search</label>
  <div class="sprk-b-TextInputIconContainer">
    <svg class="sprk-c-Icon sprk-c-Icon--m sprk-c-Icon--stroke-current-color" viewBox="0 0 64 64">
      <use xlink:href="#search" />
    </svg>
    <input class="sprk-b-TextInput sprk-b-TextInput--has-svg-icon sprk-u-Width-100" id="search-normal-inline" data-id="search-normal-inline" type="text" placeholder="Search" aria-describedby="search-normal-inline--error-container">
  </div>
  <div class="sprk-b-ErrorContainer" id="search-normal-inline--error-container">
  </div>
</div>
          
<sprk-icon-input-container>
  <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--stroke-current-color" sprk-input-icon></sprk-icon>
  <input name="inline_search_input" class="sprk-b-TextInput--has-svg-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">
  <label for="inline-search-error" class="sprk-b-Label sprk-b-Label--with-icon sprk-u-ScreenReaderText">Search</label>
  <div class="sprk-b-TextInputIconContainer">
    <svg class="sprk-c-Icon sprk-c-Icon--m sprk-c-Icon--stroke-current-color" viewBox="0 0 64 64">
      <use xlink:href="#search" />
    </svg>
    <input class="sprk-b-TextInput sprk-b-TextInput--has-svg-icon 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">
  </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-small" />
    </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">
  <label for="inline-search-disabled" class="sprk-b-Label sprk-b-Label--with-icon sprk-u-ScreenReaderText">Search</label>
  <div class="sprk-b-TextInputIconContainer">
    <svg class="sprk-c-Icon sprk-c-Icon--m sprk-c-Icon--stroke-current-color" viewBox="0 0 64 64">
      <use xlink:href="#search" />
    </svg>
    <input class="sprk-b-TextInput sprk-b-TextInput--has-svg-icon 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>
  </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--has-text-icon">
    <label for="monetary-disabled" class="sprk-b-Label sprk-b-Label--monetary">Payment</label>
    <input class="sprk-b-TextInput sprk-b-TextInput--has-text-icon  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>
  </div>
  <div class="sprk-b-ErrorContainer" id="monetary-disabled--error-container">
  </div>
</div>
          
<sprk-icon-input-container iconContainerClasses="sprk-b-TextInputIconContainer--has-text-icon">
  <label class="sprk-b-Label--monetary" sprkLabel> Payment </label>
  <input disabled class="sprk-b-TextInput--has-text-icon" name="monetary_input" type="text" pattern="(^\$?(\d+|\d{1,3}(,\d{3})*)(\.\d+)?$)|^$" [(ngModel)]="monetary_input" #monetaryInput="ngModel" sprkFormatterMonetary sprkInput />
  <div [hidden]="monetaryInput.valid || monetaryInput.pristine" sprkFieldError>
    <sprk-icon iconType="exclamation-filled-small" additionalClasses="sprk-b-ErrorIcon"></sprk-icon>
    <div class="sprk-b-ErrorText">Invalid amount.</div>
  </div>
</sprk-icon-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--has-text-icon">
    <label for="monetary-error" class="sprk-b-Label sprk-b-Label--monetary">Payment</label>
    <input class="sprk-b-TextInput sprk-b-TextInput--has-text-icon 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">
  </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-small" />
    </svg>
    <div class="sprk-b-ErrorText">
      There is an error on this field.
    </div>
  </div>
</div>
          
<sprk-icon-input-container iconContainerClasses="sprk-b-TextInputIconContainer--has-text-icon">
  <label class="sprk-b-Label--monetary" sprkLabel> Payment </label>
  <input class="sprk-b-TextInput--has-text-icon" name="monetary_input" type="text" pattern="(^\$?(\d+|\d{1,3}(,\d{3})*)(\.\d+)?$)|^$" [(ngModel)]="monetary_input" #monetaryInput="ngModel" sprkFormatterMonetary sprkInput />
  <div [hidden]="monetaryInput.valid || monetaryInput.pristine" sprkFieldError>
    <sprk-icon iconType="exclamation-filled-small" additionalClasses="sprk-b-ErrorIcon"></sprk-icon>
    <div class="sprk-b-ErrorText">Invalid amount.</div>
  </div>
</sprk-icon-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--has-text-icon">
    <label for="monetary-normal" class="sprk-b-Label sprk-b-Label--monetary">Payment</label>
    <input class="sprk-b-TextInput sprk-b-TextInput--has-text-icon  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">
  </div>
  <div class="sprk-b-ErrorContainer" id="monetary-normal--error-container">
  </div>
</div>
          
<sprk-icon-input-container iconContainerClasses="sprk-b-TextInputIconContainer--has-text-icon">
  <label class="sprk-b-Label--monetary" sprkLabel> Payment </label>
  <input class="sprk-b-TextInput--has-text-icon" name="monetary_input" type="text" pattern="(^\$?(\d+|\d{1,3}(,\d{3})*)(\.\d+)?$)|^$" [(ngModel)]="monetary_input" #monetaryInput="ngModel" sprkFormatterMonetary sprkInput />
  <div [hidden]="monetaryInput.valid || monetaryInput.pristine" sprkFieldError>
    <sprk-icon iconType="exclamation-filled-small" additionalClasses="sprk-b-ErrorIcon"></sprk-icon>
    <div class="sprk-b-ErrorText">Invalid amount.</div>
  </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">
  <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" data-id="password-error" type="password" aria-describedby="password-error--error-container" aria-invalid="true">
  <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-small" />
    </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">
  <label for="password-disabled" class="sprk-b-Label">Password</label>
  <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>
  <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">
  <label for="password-normal" class="sprk-b-Label">Password</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="password-normal" data-id="password-normal" type="password" aria-describedby="password-normal--error-container">
  <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">
  <label for="text-input-helper" class="sprk-b-Label">Text Input Label</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="text-input-helper" data-id="text-input-helper" type="text" value="" aria-describedby="text-input-helper--error-container" aria-invalid="true">
  <div class="sprk-b-HelperText">
    Optional helper text, used to clarify the field&#x27;s intent.
  </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">
  <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" 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>
  <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">
  <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" 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">
  <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">
  <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" 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">
  <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-small" />
    </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 for well known dates (i.e. birthdate), or dates in the far future or past (i.e. when did you move?).
  • 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" 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">
  <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">
  <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" 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">
  <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-small" />
    </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">
  <label for="date-input-disabled" class="sprk-b-Label">Date</label>
  <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>
  <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>
  <label for="datepicker-error" class="sprk-b-Label sprk-b-Label--with-icon">Date</label>
  <div class="sprk-b-TextInputIconContainer">
    <svg class="sprk-c-Icon sprk-c-Icon--stroke-current-color" viewBox="0 0 64 64">
      <use xlink:href="#calendar" />
    </svg>
    <input class="sprk-b-TextInput sprk-b-TextInput--has-svg-icon 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">
  </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-small" />
    </svg>
    <div class="sprk-b-ErrorText">
      There is an error on this field.
    </div>
  </div>
</div>
          
<sprk-icon-input-container>
  <label class="sprk-b-Label--with-icon" sprkLabel>
    Date Input (picker)
  </label>
  <sprk-icon iconType="calendar" additionalClasses="sprk-c-Icon--stroke-current-color sprk-b-DatePicker__icon" sprk-input-icon></sprk-icon>
  <input name="datepicker_input" class="sprk-b-TextInput--has-svg-icon" 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)]="datepicker_input" #datepickerInput="ngModel" sprkFormatterDate [sprkDatePickerConfig]="dpConfig" sprkDatepicker sprkInput />
  <div [hidden]="datepickerInput.valid || datepickerInput.pristine" sprkFieldError>
    <sprk-icon iconType="exclamation-filled-small" additionalClasses="sprk-b-ErrorIcon"></sprk-icon>
    <div class="sprk-b-ErrorText">Invalid date.</div>
  </div>
</sprk-icon-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 sprk-b-Label--with-icon">Date</label>
  <div class="sprk-b-TextInputIconContainer">
    <svg class="sprk-c-Icon sprk-c-Icon--stroke-current-color" viewBox="0 0 64 64">
      <use xlink:href="#calendar" />
    </svg>
    <input class="sprk-b-TextInput sprk-b-TextInput--has-svg-icon 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>
  </div>
  <div class="sprk-b-ErrorContainer" id="datepicker-disabled--error-container">
  </div>
</div>
          
<sprk-icon-input-container>
  <label class="sprk-b-Label--with-icon" sprkLabel>
    Date Input (picker)
  </label>
  <sprk-icon iconType="calendar" additionalClasses="sprk-c-Icon--stroke-current-color sprk-b-DatePicker__icon" sprk-input-icon></sprk-icon>
  <input disabled name="datepicker_input" class="sprk-b-TextInput--has-svg-icon" 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)]="datepicker_input" #datepickerInput="ngModel" sprkFormatterDate [sprkDatePickerConfig]="dpConfig" sprkDatepicker sprkInput />
  <div [hidden]="datepickerInput.valid || datepickerInput.pristine" sprkFieldError>
    <sprk-icon iconType="exclamation-filled-small" additionalClasses="sprk-b-ErrorIcon"></sprk-icon>
    <div class="sprk-b-ErrorText">Invalid date.</div>
  </div>
</sprk-icon-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 roughly one year before or after the current date.
  • 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 sprk-b-Label--with-icon">Date</label>
  <div class="sprk-b-TextInputIconContainer">
    <svg class="sprk-c-Icon sprk-c-Icon--stroke-current-color" viewBox="0 0 64 64">
      <use xlink:href="#calendar" />
    </svg>
    <input class="sprk-b-TextInput sprk-b-TextInput--has-svg-icon 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">
  </div>
  <div class="sprk-b-ErrorContainer" id="datepicker-normal--error-container">
  </div>
</div>
          
<sprk-icon-input-container>
  <label class="sprk-b-Label--with-icon" sprkLabel>
    Date Input (picker)
  </label>
  <sprk-icon iconType="calendar" additionalClasses="sprk-c-Icon--stroke-current-color sprk-b-DatePicker__icon" sprk-input-icon></sprk-icon>
  <input name="datepicker_input" class="sprk-b-TextInput--has-svg-icon" 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)]="datepicker_input" #datepickerInput="ngModel" sprkFormatterDate [sprkDatePickerConfig]="dpConfig" sprkDatepicker sprkInput />
  <div [hidden]="datepickerInput.valid || datepickerInput.pristine" sprkFieldError>
    <sprk-icon iconType="exclamation-filled-small" additionalClasses="sprk-b-ErrorIcon"></sprk-icon>
    <div class="sprk-b-ErrorText">Invalid date.</div>
  </div>
</sprk-icon-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