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.
...
2. Inside the div, code an <input>
element add an id
attribute of your choice.
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.
SSN Example...
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.
SSN Example...
The ssn textfield component is ready for use.
Examples
SSN field with a standard label.
SSN Example...
SSN field with a floating label.
SSN Example...
SSN field with a standard label, and error message.
SSN Example... 999-99-9999
SSN field with masked input.
SSN Example... 999-99-9999