mdl-ssn-textfield

v1.0.3

Published

2 years ago

mdl-ssn-textfield for material-design-lite

Downloads

0High
0Medium
0Low

rathxxx

material design styleguide style guide mdl select

mdl-ssn-textfield

An Material Design Lite SSN textfield implementation for capturing user entered SSNs (https://github.com/google/material-design-lite)

A custom textfield implementation of a social security number component for Material Design Lite

Install

Via npm:

npm install mdl-ssn-textfield

Then include in your html:

<link rel="stylesheet" href="./bower_components/mdl-ssn-textfield/dist/mdl-ssn-textfield.min.css">
...
<script src="./bower_components/mdl-ssn-textfield/dist/mdl-ssn-textfield.min.js"></script>

Basic use

To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the <head> section of the page, as described in the MDL Introduction.

To include a MDL ssn textfield component:

1. Code a <div> element to hold the SSN text field.

<div>
...
</div>

2. Inside the div, code an <input> element add an id attribute of your choice.

<div>
  <input type="text" id="sample3">
</div>

3. Also inside the div, after the <input> field, code a <label> element with a for attribute whose value matches the input element's id value, and a short string to be used as the field's placeholder text.

<div>
		<input type="text" id="sample3">
        <label for="sample3">SSN Example...</label>
</div>

4. Add one or more MDL classes, separated by spaces, to the div container, input field, input label, and error message using the class attribute.

<div class="mdl-ssn-textfield mdl-js-ssn-textfield mdl-ssn-textfield--floating-label">
        <input class="mdl-ssn-textfield__input" type="text" id="sample3">
        <label class="mdl-ssn-textfield__label" for="sample3">SSN Example...</label>
</div>

The ssn textfield component is ready for use.

Examples

SSN field with a standard label.

<div class="mdl-ssn-textfield mdl-js-ssn-textfield">
        <input class="mdl-ssn-textfield__input" type="text" id="sample1">
        <label class="mdl-ssn-textfield__label" for="sample1">SSN Example...</label>
</div>

SSN field with a floating label.

<div class="mdl-ssn-textfield mdl-js-ssn-textfield mdl-ssn-textfield--floating-label">
        <input class="mdl-ssn-textfield__input" type="text" id="sample4">
        <label class="mdl-ssn-textfield__label" for="sample4">SSN Example...</label>
</div>

SSN field with a standard label, and error message.

<div class="mdl-ssn-textfield mdl-js-ssn-textfield">
        <input class="mdl-ssn-textfield__input" type="text" id="sample4">
        <label class="mdl-ssn-textfield__label" for="sample4">SSN Example...</label>
		<span class="mdl-ssn-textfield__error">999-99-9999</span>
</div>

SSN field with masked input.

<div class="mdl-ssn-textfield mdl-js-ssn-textfield mdl-ssn-textfield--masked">
        <input class="mdl-ssn-textfield__input" type="text" id="sample4">
        <label class="mdl-ssn-textfield__label" for="sample4">SSN Example...</label>
		<span class="mdl-ssn-textfield__error">999-99-9999</span>
</div>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

mdl-ssn-textfield

Install

Basic use

To include a MDL ssn textfield component:

Examples