Inputs

Examples of form elements.

Restrictions

  • You should add the 'novalidate' attribute to your form, since we handle form validation ourselves, and don't use the browser's implementation
  • You'll need to strip input values on submission of special characters that we add to the values for certain inputs.
  • 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.

Text Input

This is the base input and is to be used to collect a wide variety of information from a user.

<div class="sprk-b-InputContainer">
  <label for="text-input-normal" class="sprk-b-Label">Text Input Label</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="text-input-normal" type="text" aria-describedby="text-input-normal--error-container">
  <div class="sprk-b-ErrorText" id="text-input-normal--error-container">
  </div>
</div>

Text Input - Error State

There is an error on this field.
<div class="sprk-b-InputContainer">
  <label for="text-input-error" class="sprk-b-Label">Text Input Label</label>
  <input class="sprk-b-TextInput sprk-b-TextInput--error sprk-u-Width-100" id="text-input-error" type="text" aria-describedby="text-input-error--error-container" aria-invalid="true">
  <div class="sprk-b-ErrorText" id="text-input-error--error-container">
    There is an error on this field.</div>
</div>

Text Input - Disabled State

<div class="sprk-b-InputContainer">
  <label for="text-input-disabled" class="sprk-b-Label">Text Input Label</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="text-input-disabled" type="text" aria-describedby="text-input-disabled--error-container" disabled>
  <div class="sprk-b-ErrorText" id="text-input-disabled--error-container">
  </div>
</div>
State Selection

Checkboxes - Disabled State

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

Checkboxes - Error State

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

Checkboxes

This type of input should be used when the user has the ability to select multiple items at once from a list of items. The checkbox input component should be used when there is a minimum of 3 items to choose from.

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

Radio Buttons

This type of input should be used when the user can only select one option from a list of items. The radio button component should be used when there is a minimum of 2 items to choose from in the list.

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

Radio Buttons - Error State

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

Radio Buttons - Disabled State

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

Select Box

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

<div class="sprk-b-InputContainer">
  <label for="select-normal" class="sprk-b-Label">Select Box Label</label>
  <select class="sprk-b-Select" id="select-normal" aria-describedby="select-normal--error-container">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <optgroup label="Grouped Options">
      <option value="g1">Grouped Option 1</option>
      <option value="g2">Grouped Option 2</option>
      <option value="g3">Grouped Option 3</option>
    </optgroup>
  </select>
  <div class="sprk-b-ErrorText" id="select-normal--error-container">
  </div>
</div>

Select Box - Error State

There is an error on this field.
<div class="sprk-b-InputContainer">
  <label for="select-error" class="sprk-b-Label">Select Box Label</label>
  <select class="sprk-b-Select sprk-b-Select--error" id="select-error" aria-describedby="select-error--error-container">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <optgroup label="Grouped Options">
      <option value="g1">Grouped Option 1</option>
      <option value="g2">Grouped Option 2</option>
      <option value="g3">Grouped Option 3</option>
    </optgroup>
  </select>
  <div class="sprk-b-ErrorText" id="select-error--error-container">
    There is an error on this field.</div>
</div>

Select Box - Disabled State

<div class="sprk-b-InputContainer">
  <label for="select-disabled" class="sprk-b-Label">Select Box Label</label>
  <select class="sprk-b-Select" id="select-disabled" aria-describedby="select-disabled--error-container" disabled>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <optgroup label="Grouped Options">
      <option value="g1">Grouped Option 1</option>
      <option value="g2">Grouped Option 2</option>
      <option value="g3">Grouped Option 3</option>
    </optgroup>
  </select>
  <div class="sprk-b-ErrorText" id="select-disabled--error-container">
  </div>
</div>
State Selection

Textarea - Error State

There is an error on this field.
<div class="sprk-b-InputContainer">
  <label for="textarea-error" class="sprk-b-Label">Description</label>
  <textarea class="sprk-b-TextInput  sprk-b-TextInput--error sprk-u-Width-100" id="textarea-error" aria-describedby="textarea-error--error-container" aria-invalid="true"></textarea>
  <div class="sprk-b-ErrorText" id="textarea-error--error-container">
    There is an error on this field.</div>
</div>

Textarea - Disabled State

<div class="sprk-b-InputContainer">
  <label for="textarea-disabled" class="sprk-b-Label">Description</label>
  <textarea class="sprk-b-TextInput  sprk-u-Width-100" id="textarea-disabled" aria-describedby="textarea-disabled--error-container" disabled></textarea>
  <div class="sprk-b-ErrorText" id="textarea-disabled--error-container">
  </div>
</div>

Textarea

This input should be used to collect something that cannot be captured in a single line input field. Text should wrap within the input field as it is populated with text.

<div class="sprk-b-InputContainer">
  <label for="textarea-normal" class="sprk-b-Label">Description</label>
  <textarea class="sprk-b-TextInput  sprk-u-Width-100" id="textarea-normal" aria-describedby="textarea-normal--error-container"></textarea>
  <div class="sprk-b-ErrorText" id="textarea-normal--error-container">
  </div>
</div>
State Selection

SSN Input

This specific input is specifically used to collect a user's Social Security Number and has a very specific set of rules in the section below.

<div class="sprk-b-InputContainer" data-sprk-input="ssn">
  <label for="ssn-normal" class="sprk-b-Label">Social Security #</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="ssn-normal" type="password" pattern="(^(?!666|000|9\d{2})\d{3}([- ]{0,1})(?!00)\d{2}\1(?!0{4})\2\d{4}$)|^$" placeholder="000-00-0000" aria-describedby="ssn-normal--error-container">
  <div class="sprk-b-SelectionContainer">
    <input id="ssn-normal-show-ssn" type="checkbox">
    <label for="ssn-normal-show-ssn" class="sprk-b-Label--inline sprk-u-mls">Show SSN</label>
  </div>
  <div class="sprk-b-ErrorText" id="ssn-normal--error-container">
  </div>
</div>

SSN Input - Error State

There is an error on this field.
<div class="sprk-b-InputContainer" data-sprk-input="ssn">
  <label for="ssn-error" class="sprk-b-Label">Social Security #</label>
  <input class="sprk-b-TextInput sprk-b-TextInput--error sprk-u-Width-100" id="ssn-error" type="password" pattern="(^(?!666|000|9\d{2})\d{3}([- ]{0,1})(?!00)\d{2}\1(?!0{4})\2\d{4}$)|^$" placeholder="000-00-0000" aria-invalid="true" aria-describedby="ssn-error--error-container">
  <div class="sprk-b-SelectionContainer">
    <input id="ssn-error-show-ssn" type="checkbox">
    <label for="ssn-error-show-ssn" class="sprk-b-Label--inline sprk-u-mls">Show SSN</label>
  </div>
  <div class="sprk-b-ErrorText" id="ssn-error--error-container">
    There is an error on this field.</div>
</div>

SSN Input - Disabled State

<div class="sprk-b-InputContainer" data-sprk-input="ssn">
  <label for="ssn-disabled" class="sprk-b-Label">Social Security #</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="ssn-disabled" type="password" pattern="(^(?!666|000|9\d{2})\d{3}([- ]{0,1})(?!00)\d{2}\1(?!0{4})\2\d{4}$)|^$" placeholder="000-00-0000" aria-describedby="ssn-disabled--error-container" disabled>
  <div class="sprk-b-SelectionContainer">
    <input id="ssn-disabled-show-ssn" type="checkbox" disabled>
    <label for="ssn-disabled-show-ssn" class="sprk-b-Label--inline sprk-u-mls">Show SSN</label>
  </div>
  <div class="sprk-b-ErrorText" id="ssn-disabled--error-container">
  </div>
</div>
State Selection

Search Input

This input should be used when the client has the ability to search within their experience by a word or phrase to find a specific piece of content without the use of navigation.

<div class="sprk-b-InputContainer">
  <label for="search-normal" class="sprk-b-Label">Search</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="search-normal" type="search" role="search" aria-describedby="search-normal--error-container">
  <div class="sprk-b-ErrorText" id="search-normal--error-container"></div>
</div>

Search Input - Error State

There is an error on this field.
<div class="sprk-b-InputContainer">
  <label for="search-error" class="sprk-b-Label">Search</label>
  <input class="sprk-b-TextInput sprk-b-TextInput--error sprk-u-Width-100" id="search-error" type="search" role="search" aria-describedby="search-error--error-container" aria-invalid="true">
  <div class="sprk-b-ErrorText" id="search-error--error-container">There is an error on this field.</div>
</div>

Search Input - Disabled State

<div class="sprk-b-InputContainer">
  <label for="search-disabled" class="sprk-b-Label">Search</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="search-disabled" type="search" role="search" aria-describedby="search-disabled--error-container" disabled>
  <div class="sprk-b-ErrorText" id="search-disabled--error-container"></div>
</div>
State Selection

Inline Search Input

This style of the search input retains the same functionality as the "search input," but is styled in such a manner as to allow it to be used in the Masthead component or similar components.

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

Inline Search Input - Error State

This search input is intended for use in the masthead and similar patterns.

There is an error on this field.
<div class="sprk-b-InputContainer  ">
  <label for="inline-search-error" class="sprk-u-ScreenReaderText">Search</label>
  <input placeholder="Search" class="sprk-b-TextInput sprk-b-TextInput--error  sprk-u-Width-100" id="inline-search-error" type="search" role="search" aria-describedby="inline-search-error--error-container" aria-invalid="true">
  <div class="sprk-b-ErrorText" id="inline-search-error--error-container">
    There is an error on this field.</div>
</div>

Inline Search Input - Disabled State

This search input is intended for use in the masthead and similar patterns.

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

Monetary Input - Disabled State

<div class="sprk-b-InputContainer" data-sprk-input="monetary">
  <label for="monetary-disabled" class="sprk-b-Label">Payment</label>
  <div class="sprk-b-TextInput--monetary">
    <input class="sprk-b-TextInput  sprk-u-Width-100 sprk-u-plm" pattern="(^\$?(\d+|\d{1,3}(,\d{3})*)(\.\d+)?$)|^$" id="monetary-disabled" type="tel" aria-describedby="monetary-disabled--error-container" disabled>
  </div>
  <div class="sprk-b-ErrorText" id="monetary-disabled--error-container">
  </div>
</div>

Monetary Input - Error State

There is an error on this field.
<div class="sprk-b-InputContainer" data-sprk-input="monetary">
  <label for="monetary-error" class="sprk-b-Label">Payment</label>
  <div class="sprk-b-TextInput--monetary">
    <input class="sprk-b-TextInput sprk-b-TextInput--error  sprk-u-Width-100 sprk-u-plm" pattern="(^\$?(\d+|\d{1,3}(,\d{3})*)(\.\d+)?$)|^$" id="monetary-error" type="tel" aria-describedby="monetary-error--error-container" aria-invalid="true">
  </div>
  <div class="sprk-b-ErrorText" id="monetary-error--error-container">
    There is an error on this field.</div>
</div>

Monetary Input

This input should be used to collect a monetary amount.

<div class="sprk-b-InputContainer" data-sprk-input="monetary">
  <label for="monetary-normal" class="sprk-b-Label">Payment</label>
  <div class="sprk-b-TextInput--monetary">
    <input class="sprk-b-TextInput  sprk-u-Width-100 sprk-u-plm" pattern="(^\$?(\d+|\d{1,3}(,\d{3})*)(\.\d+)?$)|^$" id="monetary-normal" type="tel" aria-describedby="monetary-normal--error-container">
  </div>
  <div class="sprk-b-ErrorText" id="monetary-normal--error-container">
  </div>
</div>
State Selection

Password Input - Error State

There is an error on this field.
<div class="sprk-b-InputContainer" data-sprk-input="password">
  <label for="password-error" class="sprk-b-Label">Password</label>
  <input class="sprk-b-TextInput sprk-b-TextInput--error sprk-u-Width-100" id="password-error" type="password" aria-describedby="password-error--error-container" aria-invalid="true">
  <div class="sprk-b-SelectionContainer">
    <input id="password-error-show-password" type="checkbox">
    <label for="password-error-show-password" class="sprk-b-Label--inline sprk-u-mls">Show Password</label>
  </div>
  <div class="sprk-b-ErrorText" id="password-error--error-container">
    There is an error on this field.</div>
</div>

Password Input - Disabled State

<div class="sprk-b-InputContainer" data-sprk-input="password">
  <label for="password-disabled" class="sprk-b-Label">Password</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="password-disabled" type="password" aria-describedby="password-disabled--error-container" disabled>
  <div class="sprk-b-SelectionContainer">
    <input id="password-disabled-show-password" type="checkbox" disabled>
    <label for="password-disabled-show-password" class="sprk-b-Label--inline sprk-u-mls">Show Password</label>
  </div>
  <div class="sprk-b-ErrorText" id="password-disabled--error-container">
  </div>
</div>

Password Input

This input should be used when it is required that a user input a password. The specific field requirements are below regarding password visibility.

<div class="sprk-b-InputContainer" data-sprk-input="password">
  <label for="password-normal" class="sprk-b-Label">Password</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="password-normal" type="password" aria-describedby="password-normal--error-container">
  <div class="sprk-b-SelectionContainer">
    <input id="password-normal-show-password" type="checkbox">
    <label for="password-normal-show-password" class="sprk-b-Label--inline sprk-u-mls">Show Password</label>
  </div>
  <div class="sprk-b-ErrorText" id="password-normal--error-container">
  </div>
</div>
State Selection

Helper Text

Helper text should be used when a specific input type has special requirements that the user needs to be aware of so they can successfully enter the desired information.

Optional helper text, used to clarify the field's intent.
<div class="sprk-b-HelperText">
  Optional helper text, used to clarify the field's intent.</div>

Phone Number Input - Disabled State

<div class="sprk-b-InputContainer" data-sprk-input="phone">
  <label for="phone-number-disabled" class="sprk-b-Label">Phone Number</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="phone-number-disabled" type="tel" pattern="(^(\+\d{1,2}\s)?((\(\d{3}\))|\d{3})[\s.-]?\d{3}[\s.-]?\d{4}$)|^$" placeholder="(000) 000-0000" aria-describedby="phone-number-disabled--error-container" disabled>
  <div class="sprk-b-ErrorText" id="phone-number-disabled--error-container">
  </div>
</div>

Phone Number Input

This input should be used to collect a phone number. The input will auto format the phone number on blur.

<div class="sprk-b-InputContainer" data-sprk-input="phone">
  <label for="phone-input-normal" class="sprk-b-Label">Phone Number</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="phone-input-normal" type="tel" pattern="(^(\+\d{1,2}\s)?((\(\d{3}\))|\d{3})[\s.-]?\d{3}[\s.-]?\d{4}$)|^$" placeholder="(000) 000-0000" aria-describedby="phone-input-normal--error-container">
  <div class="sprk-b-ErrorText" id="phone-input-normal--error-container">
  </div>
</div>

Phone Number Input - Error State

There is an error on this field.
<div class="sprk-b-InputContainer" data-sprk-input="phone">
  <label for="phone-number-error" class="sprk-b-Label">Phone Number</label>
  <input class="sprk-b-TextInput sprk-b-TextInput--error sprk-u-Width-100" id="phone-number-error" type="tel" pattern="(^(\+\d{1,2}\s)?((\(\d{3}\))|\d{3})[\s.-]?\d{3}[\s.-]?\d{4}$)|^$" placeholder="(000) 000-0000" aria-describedby="phone-number-error--error-container" aria-invalid="true">
  <div class="sprk-b-ErrorText" id="phone-number-error--error-container">
    There is an error on this field.</div>
</div>
State Selection

Date Picker - Error State

There is an error on this field.
<div class="sprk-b-InputContainer" data-sprk-input="date" data-sprk-datepicker>
  <label for="datepicker-error" class="sprk-b-Label">Date</label>
  <div class="sprk-b-TextInput--date-picker">
    <svg class="sprk-c-Icon" viewBox="0 0 100 100">
      <use xlink:href="#calendar" />
    </svg>
    <input class="sprk-b-TextInput sprk-u-pll sprk-b-TextInput--error sprk-u-Width-100" id="datepicker-error" type="text" pattern="^(((0[1358]|1[02])([\/-]?)(0[1-9]|[12]\d|3[01])|(0[469]|11)([\/-]?)(0[1-9]|[12]\d|30)|02(\/?)((0?\d)|[12]\d))(\4|\7|\9)[12]\d{3})?$" placeholder="MM/DD/YYYY" aria-invalid="true" aria-describedby="datepicker-error--error-container">
  </div>
  <div class="sprk-b-ErrorText" id="datepicker-error--error-container">
    There is an error on this field.</div>
</div>

Date Picker - Disabled State

<div class="sprk-b-InputContainer" data-sprk-input="date" data-sprk-datepicker>
  <label for="datepicker-disabled" class="sprk-b-Label">Date</label>
  <div class="sprk-b-TextInput--date-picker">
    <svg class="sprk-c-Icon" viewBox="0 0 100 100">
      <use xlink:href="#calendar" />
    </svg>
    <input class="sprk-b-TextInput sprk-u-pll sprk-b-TextInput--error sprk-u-Width-100" id="datepicker-disabled" type="text" pattern="^(((0[1358]|1[02])([\/-]?)(0[1-9]|[12]\d|3[01])|(0[469]|11)([\/-]?)(0[1-9]|[12]\d|30)|02(\/?)((0?\d)|[12]\d))(\4|\7|\9)[12]\d{3})?$" placeholder="MM/DD/YYYY" aria-describedby="datepicker-disabled--error-container" disabled>
  </div>
  <div class="sprk-b-ErrorText" id="datepicker-disabled--error-container">
  </div>
</div>

Date Picker

The date picker component is a type of date input, but has the actual date picker feature with a calendar included to allow users to pick a very specific date on the calendar. Spark recommends that this component be used to select dates in the future.

<div class="sprk-b-InputContainer" data-sprk-input="date" data-sprk-datepicker>
  <label for="datepicker-normal" class="sprk-b-Label">Date</label>
  <div class="sprk-b-TextInput--date-picker">
    <svg class="sprk-c-Icon" viewBox="0 0 100 100">
      <use xlink:href="#calendar" />
    </svg>
    <input class="sprk-b-TextInput sprk-u-pll sprk-u-Width-100" id="datepicker-normal" type="text" pattern="^(((0[1358]|1[02])([\/-]?)(0[1-9]|[12]\d|3[01])|(0[469]|11)([\/-]?)(0[1-9]|[12]\d|30)|02(\/?)((0?\d)|[12]\d))(\4|\7|\9)[12]\d{3})?$" placeholder="MM/DD/YYYY" aria-describedby="datepicker-normal--error-container">
  </div>
  <div class="sprk-b-ErrorText" id="datepicker-normal--error-container">
  </div>
</div>
State Selection

Date Input

The date input component is used for collecting date information. Spark recommends that this component be used to collect information for the past.

<div class="sprk-b-InputContainer" data-sprk-input="date">
  <label for="date-input-normal" class="sprk-b-Label">Date</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="date-input-normal" type="text" pattern="^(((0[1358]|1[02])([\/-]?)(0[1-9]|[12]\d|3[01])|(0[469]|11)([\/-]?)(0[1-9]|[12]\d|30)|02(\/?)((0?\d)|[12]\d))(\4|\7|\9)[12]\d{3})?$" placeholder="MM/DD/YYYY" aria-describedby="date-input-normal--error-container">
  <div class="sprk-b-ErrorText" id="date-input-normal--error-container">
  </div>
</div>

Date Input - Error State

There is an error on this field.
<div class="sprk-b-InputContainer" data-sprk-input="date">
  <label for="date-input-error" class="sprk-b-Label">Date</label>
  <input class="sprk-b-TextInput sprk-b-TextInput--error sprk-u-Width-100" id="date-input-error" type="text" pattern="^(((0[1358]|1[02])([\/-]?)(0[1-9]|[12]\d|3[01])|(0[469]|11)([\/-]?)(0[1-9]|[12]\d|30)|02(\/?)((0?\d)|[12]\d))(\4|\7|\9)[12]\d{3})?$" placeholder="MM/DD/YYYY" aria-describedby="date-input-error--error-container" aria-invalid="true">
  <div class="sprk-b-ErrorText" id="date-input-error--error-container">
    There is an error on this field.</div>
</div>

Date Input - Disabled State

<div class="sprk-b-InputContainer" data-sprk-input="date">
  <label for="date-input-disabled" class="sprk-b-Label">Date</label>
  <input class="sprk-b-TextInput sprk-u-Width-100" id="date-input-disabled" type="text" pattern="^(((0[1358]|1[02])([\/-]?)(0[1-9]|[12]\d|3[01])|(0[469]|11)([\/-]?)(0[1-9]|[12]\d|30)|02(\/?)((0?\d)|[12]\d))(\4|\7|\9)[12]\d{3})?$" placeholder="MM/DD/YYYY" aria-describedby="date-input-disabled--error-container" disabled>
  <div class="sprk-b-ErrorText" id="date-input-disabled--error-container">
  </div>
</div>
State Selection