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-input-container-huge-max-width 37.5rem The value used as a maximum width for huge 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-huge-border 1px solid $sprk-black-tint-25 The border around huge text input elements.
$sprk-text-input-huge-focus-border-width 2px The border radius to use for huge text input elements when it's focused.
$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-text-input-huge-height 64px The height of the huge text input.
$sprk-text-input-huge-font-size $sprk-font-size-display-five The font-size of the huge text input.
$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 2em 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--has-text-icon 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.

React Information

The React implementation of inputs uses the following components to produce the variants below. See each variant's example for configuration options.

  • SprkTextInput
  • SprkSelectionInput
  • SprkRevealInput
  • SprkDatePickerInput

The following props are available with all the Input components.

General

Prop Type Description
additionalClasses string A space-separated list of classes that will be added to the outermost element.
analyticsString string Assigned to the data-analytics attribute.
disabled boolean If true, will render the component in the disabled state.
errorMessage string The error message to render inside of the input's error container.
helperText string Text that appears below the input, intended to provide more information to a user.
idString string Assigned to the data-id attribute.
label string The text to render inside the label element.
valid boolean Determines whether to render the component in the valid or the error state.

SprkTextInput

In addition to the props above, the following props are available for SprkTextInput.

Prop Type Description
formatter function A function supplied will be passed the value of the input and then executed, if the valid prop is true. The value returned will be assigned to the value of the input.
forwardedRef React ref A ref passed in will be attached to the input element of the rendered component.
hiddenLabel boolean If true, will visually hide the label, using the value of the label prop as screen reader only text.
leadingIcon string The name of the icon, when supplied, will be rendered inside the input element.
textIcon string If true, will render the currency icon inside the input element.
type string Will assign its value to the type attribute of the input element.

Expects only the following items:

  • 'textarea' - will render a text area instead of a text input
  • 'hugeTextInput' - will render a text input larger than the base input
value string Will assign its value to the value attribute of the input element.

SprkSelectionInput

In addition to the props above, the following props are available for SprkSelectionInput.

Prop Type Description
choices array Expects an array of objects that describe the choices available to the user. See below for choice object details.
groupLabel string Text that describes the group of selection items as a whole, applies to the checkbox and radio variants only.

The choice object describes a choice available to a user via SprkSelectionInput. See below for object details.

Key Type Description
label string Text attached to the rendered input element.
name string Assigned to the name attribute of the rendered input element.
value string Assigned to the value attribute of the rendered input element.

SprkRevealInput

In addition to the props above, the following props are available for SprkRevealInput.

Prop Type Description
toggleLabel string The text attached to the checkbox that toggles the visibility of the input's content.

SprkDatePickerInput

In addition to the props above, the following props are available for SprkDatePickerInput.

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

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>
<SprkTextInput
 label="Text Input Label"
 name="text-input-label"
 disabled
/>

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>
<SprkTextInput
 label="Text Input Label"
 name="text-input-label"
/>

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>
<SprkTextInput
 label="Text Input Label"
 name="text-input-label"
 valid={false}
 errorMessage="There is an error on this field."
/>
State Selection

Text Input Huge

This text input is larger than base text input.

Information

  • The input's 'type' attribute should be the most appropriate value that semantically matches your use case.
  • The label is hidden, but important to include so it's still accessible to screen readers.

Restrictions

  • This should only be used in a form that asks for one input at a time.
<div class="sprk-b-InputContainer sprk-b-InputContainer--huge">
  <label
   for="text-input-huge"
   class="sprk-b-Label sprk-u-ScreenReaderText"
  >Text Input Label</label>
  <input
   class="sprk-b-TextInput sprk-b-TextInput--huge sprk-u-Width-100"
   id="text-input-huge"
   data-id="text-input-huge"
   type="text"
   value=""
   aria-describedby="text-input-huge--error-container"
   placeholder="Placeholder text"
  >
</div>
          
<sprk-input-container additionalClasses="sprk-b-InputContainer--huge">
  <label
   class="sprk-u-ScreenReaderText"
   sprkLabel
  >Text Input Label</label>
  <input
   name="text_input"
   [ngClass]="{ 'sprk-b-TextInput--huge': true, 'sprk-b-TextInput--error': textInput.invalid && textInput.dirty }"
   type="text"
   [(ngModel)]="text_input"
   required
   #textInput="ngModel"
   data-id="input-1"
   sprkInput
  >
</sprk-input-container>
<SprkTextInput
 type="hugeTextInput"
 label="Text Input Label"
 name="text-input-label"
/>

Text Input Huge - Error State

This text input is larger than base text input.

Information

  • The input's 'type' attribute should be the most appropriate value that semantically matches your use case.
  • The label is hidden, but important to include so it's still accessible to screen readers.

Restrictions

  • This should only be used in a form that asks for one input at a time.
There is an error on this field.
<div class="sprk-b-InputContainer sprk-b-InputContainer--huge">
  <label
   for="text-input-huge-error"
   class="sprk-b-Label sprk-u-ScreenReaderText"
  >Text Input Label</label>
  <input
   class="sprk-b-TextInput sprk-b-TextInput--huge sprk-b-TextInput--error sprk-u-Width-100"
   id="text-input-huge-error"
   data-id="text-input-huge-error"
   type="text"
   value=""
   aria-describedby="text-input-huge-error--error-container"
   aria-invalid="true"
   placeholder="Placeholder text"
  >
  <div
   class="sprk-b-ErrorContainer"
   id="text-input-huge-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 additionalClasses="sprk-b-InputContainer--huge">
  <label
   class="sprk-u-ScreenReaderText"
   sprkLabel
  >Text Input Label</label>
  <input
   name="text_input"
   [ngClass]="{ 'sprk-b-TextInput--huge':true, '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>
<SprkTextInput
 type="hugeTextInput"
 label="Text Input Label"
 name="text-input-label"
 valid={false}
 errorMessage="There is an error on this field."
/>

Text Input Huge - Disabled State

This text input is larger than base text input.

Information

  • The input's 'type' attribute should be the most appropriate value that semantically matches your use case.
  • The label is hidden, but important to include so it's still accessible to screen readers.

Restrictions

  • This should only be used in a form that asks for one input at a time.
<div class="sprk-b-InputContainer sprk-b-InputContainer--huge">
  <label
   for="text-input-huge-disabled"
   class="sprk-b-Label sprk-b-Label--disabled sprk-u-ScreenReaderText"
  >Text Input Label</label>
  <input
   class="sprk-b-TextInput sprk-b-TextInput--huge sprk-u-Width-100"
   id="text-input-huge-disabled"
   data-id="text-input-huge-disabled"
   type="text"
   value="disabled value"
   aria-describedby="text-input-huge-disabled--error-container"
   disabled
   placeholder="Placeholder text"
  >
</div>
          
<sprk-input-container additionalClasses="sprk-b-InputContainer--huge">
  <label
   class="sprk-u-ScreenReaderText"
   sprkLabel
  >Text Input Label</label>
  <input
   disabled
   name="text_input"
   [ngClass]="{ 'sprk-b-TextInput--huge': true, '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>
<SprkTextInput
 type="hugeTextInput"
 label="Text Input Label"
 name="text-input-label"
 disabled
/>
State Selection

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>
<SprkSelectionInput
 groupLabel="Checkbox Input"
 choices={choices}
 variant="checkbox"
/>
<script>
  const choices = [{
      label: 'Checkbox Item 1',
      name: 'check[]',
      value: 'item-1',
    },
    {
      label: 'Checkbox Item 2',
      name: 'check[]',
      value: 'item-2',
    },
    {
      label: 'Checkbox Item 3',
      name: 'check[]',
      value: 'item-2',
    },
  ];
</script>

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>
<SprkSelectionInput
 groupLabel="Checkbox Input"
 choices={choices}
 variant="checkbox"
 disabled
/>
<script>
  const choices = [{
      label: 'Checkbox Item 1',
      name: 'check[]',
      value: 'item-1',
    },
    {
      label: 'Checkbox Item 2',
      name: 'check[]',
      value: 'item-2',
    },
    {
      label: 'Checkbox Item 3',
      name: 'check[]',
      value: 'item-2',
    },
  ];
</script>

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>
<SprkSelectionInput
 groupLabel="Checkbox Input"
 choices={choices}
 variant="checkbox"
 valid={false}
 errorMessage="There is an error on this field."
/>
<script>
  const choices = [{
      label: 'Checkbox Item 1',
      name: 'check[]',
      value: 'item-1',
    },
    {
      label: 'Checkbox Item 2',
      name: 'check[]',
      value: 'item-2',
    },
    {
      label: 'Checkbox Item 3',
      name: 'check[]',
      value: 'item-2',
    },
  ];
</script>
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>
<SprkSelectionInput
 groupLabel="Radio Group Label"
 choices={choices}
 variant="radio"
/>
<script>
  const choices = [{
      label: 'Radio Item 1',
      name: 'radio[]',
      value: 'item-1',
    },
    {
      label: 'Radio Item 2',
      name: 'radio[]',
      value: 'item-2',
    },
    {
      label: 'Radio Item 3',
      name: 'radio[]',
      value: 'item-2',
    },
  ];
</script>

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>
<SprkSelectionInput
 groupLabel="Radio Group Label"
 choices={choices}
 variant="radio"
 valid={false}
 errorMessage="There is an error on this field."
/>
<script>
  const choices = [{
      label: 'Radio Item 1',
      name: 'radio[]',
      value: 'item-1',
    },
    {
      label: 'Radio Item 2',
      name: 'radio[]',
      value: 'item-2',
    },
    {
      label: 'Radio Item 3',
      name: 'radio[]',
      value: 'item-2',
    },
  ];
</script>

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>
<SprkSelectionInput
 groupLabel="Radio Group Label"
 choices={choices}
 variant="radio"
 disabled
/>
<script>
  const choices = [{
      label: 'Radio Item 1',
      name: 'radio[]',
      value: 'item-1',
    },
    {
      label: 'Radio Item 2',
      name: 'radio[]',
      value: 'item-2',
    },
    {
      label: 'Radio Item 3',
      name: 'radio[]',
      value: 'item-2',
    },
  ];
</script>
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>
  <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-icon
   iconType="chevron-down"
   additionalClasses="sprk-c-Icon--stroke-current-color sprk-b-SelectContainer__icon"
   sprk-select-icon
  ></sprk-icon>
  <label sprkLabel>Select Box Label</label>
</sprk-input-container>
<SprkSelectionInput
 choices={choices}
 name="name"
 variant="select"
/>
<script>
  const choices = [{
      label: 'Option 1',
      value: 'option-1',
    },
    {
      label: 'Option 2',
      value: 'option-2',
    },
    {
      label: 'Option 3',
      value: 'option-3',
    },
    {
      label: 'Grouped Options',
      options: [{
          label: 'Grouped Option 1',
          value: 'grouped-option-1',
        },
        {
          label: 'Grouped Option 2',
          value: 'grouped-option-2',
        },
        {
          label: 'Grouped Option 3',
          value: 'grouped-option-3',
        },
      ],
    },
  ];
</script>

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>
<SprkSelectionInput
 choices={choices}
 variant="select"
 name="select"
 valid={false}
 errorMessage="There is an error in the field."
/>
<script>
  const choices = [{
      label: 'Option 1',
      value: 'option-1',
    },
    {
      label: 'Option 2',
      value: 'option-2',
    },
    {
      label: 'Option 3',
      value: 'option-3',
    },
    {
      label: 'Grouped Options',
      options: [{
          label: 'Grouped Option 1',
          value: 'grouped-option-1',
        },
        {
          label: 'Grouped Option 2',
          value: 'grouped-option-2',
        },
        {
          label: 'Grouped Option 3',
          value: 'grouped-option-3',
        },
      ],
    },
  ];
</script>

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>
<SprkSelectionInput
 choices={choices}
 name="select"
 variant="select"
 disabled
/>
<script>
  const choices = [{
      label: 'Option 1',
      value: 'option-1',
    },
    {
      label: 'Option 2',
      value: 'option-2',
    },
    {
      label: 'Option 3',
      value: 'option-3',
    },
    {
      label: 'Grouped Options',
      options: [{
          label: 'Grouped Option 1',
          value: 'grouped-option-1',
        },
        {
          label: 'Grouped Option 2',
          value: 'grouped-option-2',
        },
        {
          label: 'Grouped Option 3',
          value: 'grouped-option-3',
        },
      ],
    },
  ];
</script>
State Selection

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>
<SprkTextInput
 label="Description"
 name="description"
 type="textarea"
 disabled
/>

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>
<SprkTextInput
 label="Description"
 name="description"
 type="textarea"
/>

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>
<SprkTextInput
 label="Description"
 name="description"
 type="textarea"
 valid={false}
 errorMessage="There is an error in the field."
/>
State Selection

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>
<SprkRevealInput
 errorMessage="There is an error in this field."
 formatter={formatSSN}
 valid={isValidSSN(ssn)}
 value={ssn}
 onChange={this.handleChange}
 label="Social Security Number"
 toggleLabel="Show SSN"
 name="ssn"
/>

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>
<SprkRevealInput
 formatter={formatSSN}
 valid={isValidSSN(ssn)}
 value={ssn}
 onChange={this.handleChange}
 label="Social Security Number"
 toggleLabel="Show SSN"
 name="ssn"
/>

Information

Directive Description

sprkFormatterSsn

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

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>
<SprkRevealInput
 errorMessage="There is an error in this field."
 formatter={formatSSN}
 valid={isValidSSN(ssn)}
 value={ssn}
 onChange={this.handleChange}
 label="Social Security Number"
 toggleLabel="Show SSN"
 name="ssn"
 disabled
/>
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>
<SprkTextInput
 label="Search"
 name="Search"
 placeholder="Search"
/>

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>
<SprkTextInput
 label="Search"
 name="Search"
 placeholder="Search"
 valid={false}
 errorMessage="There is an error on the field."
/>

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>
<SprkTextInput
 label="Search"
 name="Search"
 placeholder="Search"
 disabled
/>
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>
<SprkTextInput
 leadingIcon="search"
 hiddenLabel
 name="InlineSearch"
 placeholder="Search"
/>

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>
<SprkTextInput
 leadingIcon="search"
 hiddenLabel
 name="InlineSearch"
 placeholder="Search"
 disabled
/>

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>
<SprkTextInput
 leadingIcon="search"
 hiddenLabel
 name="InlineSearch"
 placeholder="Search"
 valid={false}
 errorMessage="There is an error on the field."
/>
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>
<SprkTextInput
 label="Payment"
 textIcon
 name="monetary"
 valid={isValidMonetary(monetary)}
 value={monetary}
 onChange={this.handleChange}
 onBlur={this.handleMonetaryBlur}
 placeholder="0.00"
 disabled
/>

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>
<SprkTextInput
 label="Payment"
 textIcon
 name="monetary"
 valid={isValidMonetary(monetary)}
 value={monetary}
 onChange={this.handleChange}
 onBlur={this.handleMonetaryBlur}
 placeholder="0.00"
/>

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.

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>
<SprkTextInput
 label="Payment"
 textIcon
 name="monetary"
 valid={isValidMonetary(monetary)}
 value={monetary}
 onChange={this.handleChange}
 onBlur={this.handleMonetaryBlur}
 placeholder="0.00"
 errorMessage="There is an error on the field."
/>
State Selection

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>
<SprkRevealInput
 label="Password"
 toggleLabel="Show Password"
 name="password-1"
 disabled
/>

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>
<SprkRevealInput
 label="Password"
 toggleLabel="Show Password"
 name="password-1"
/>

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>
<SprkRevealInput
 label="Password"
 toggleLabel="Show Password"
 name="password-1"
 valid={false}
 errorMessage="There is an error on this field."
/>
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

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>
<SprkTextInput
 label="Phone Number"
 name="phone"
 placeholder="(000) 000-0000"
 valid={isValidPhone(phone)}
 value={isValidPhone(phone)
 &&
 formatPhone(phone)
 ?
 formatPhone(phone)
 :
 phone}
 onChange={this.handleChange}
 errorMessage="Incorrect phone number."
/>

Information

Directive Description

sprkFormatterPhoneNumber

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

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>
<SprkTextInput
 label="Phone Number"
 name="phone"
 placeholder="(000) 000-0000"
 valid={isValidPhone(phone)}
 value={isValidPhone(phone)
 &&
 formatPhone(phone)
 ?
 formatPhone(phone)
 :
 phone}
 onChange={this.handleChange}
 errorMessage="Incorrect phone number."
 disabled
/>

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>
<SprkTextInput
 label="Phone Number"
 name="phone"
 placeholder="(000) 000-0000"
 valid={isValidPhone(phone)}
 value={isValidPhone(phone)
 &&
 formatPhone(phone)
 ?
 formatPhone(phone)
 :
 phone}
 onChange={this.handleChange}
 errorMessage="Incorrect phone number."
/>
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>
<SprkTextInput
 formatter={formatDate}
 label="Date"
 name="date"
 placeholder="01/01/2019"
 valid={isValidDate(date)}
 value={date}
 onChange={this.handleChange}
 errorMessage="Incorrect date."
/>

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>
<SprkTextInput
 formatter={formatDate}
 label="Date"
 name="date"
 placeholder="01/01/2019"
 valid={isValidDate(date)}
 value={date}
 onChange={this.handleChange}
 errorMessage="Incorrect date."
/>

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>
<SprkTextInput
 formatter={formatDate}
 label="Date"
 name="date"
 placeholder="01/01/2019"
 valid={isValidDate(date)}
 value={date}
 onChange={this.handleChange}
 errorMessage="Incorrect date."
 disabled
/>
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>
<SprkDatePickerInput
 formatter={formatDate}
 label="Date"
 name="date"
 placeholder="01/01/2019"
 valid={isValidDate(date)}
 value={date}
 onChange={this.handleChange}
 errorMessage="Incorrect date."
/>

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>
<SprkDatePickerInput
 formatter={formatDate}
 label="Date"
 name="date"
 placeholder="01/01/2019"
 valid={isValidDate(date)}
 value={date}
 onChange={this.handleChange}
 errorMessage="Incorrect date."
/>

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.

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>
<SprkDatePickerInput
 formatter={formatDate}
 label="Date"
 name="date"
 placeholder="01/01/2019"
 valid={isValidDate(date)}
 value={date}
 onChange={this.handleChange}
 errorMessage="Incorrect date."
 disabled
/>
State Selection