%7B%22id%22%3A%22text-field%22%2C%22artifact%22%3A%22lib%2Ftext-field%2Fdemo.js%22%2C%22contents%22%3A%22%60%60%60html%5Cn%3C!--%20resting%20state%20--%3E%5Cn%3C!--%20HACK%20NOTE%3A%20remove%20the%20inline%20style%20for%20width%20when%20using%20this%20component%20--%3E%5Cn%3Cdiv%20class%3D%5C%22c-text-field%5C%22%20style%3D%5C%22width%3A%20280px%3B%5C%22%3E%5Cn%20%20%20%20%3Cinput%20%5Cn%20%20%20%20%20%20%20%20class%3D%5C%22c-text-field__input%5C%22%20%5Cn%20%20%20%20%20%20%20%20type%3D%5C%22text%5C%22%20%5Cn%20%20%20%20%20%20%20%20id%3D%5C%22tf-box%5C%22%20%5Cn%20%20%20%20%2F%3E%5Cn%20%20%20%20%3Clabel%20for%3D%5C%22tf-box%5C%22%20class%3D%5C%22c-text-field__label%5C%22%20id%3D%5C%22lbl-tf%5C%22%3EText%20field%3C%2Flabel%3E%5Cn%20%20%20%20%3Cp%20class%3D%5C%22c-text-field__helper-text%5C%22%3EHelper%20text%20(possibly%20validation%20message)%3C%2Fp%3E%5Cn%3C%2Fdiv%3E%5Cn%5Cn%3Cdiv%20class%3D%5C%22c-text-field%5C%22%20style%3D%5C%22width%3A%20280px%3B%5C%22%3E%5Cn%20%20%20%20%3Cinput%20%5Cn%20%20%20%20%20%20%20%20class%3D%5C%22c-text-field__input%5C%22%20%5Cn%20%20%20%20%20%20%20%20type%3D%5C%22text%5C%22%20%5Cn%20%20%20%20%20%20%20%20id%3D%5C%22tf-box2%5C%22%20%5Cn%20%20%20%20%2F%3E%5Cn%20%20%20%20%3Clabel%20for%3D%5C%22tf-box2%5C%22%20class%3D%5C%22c-text-field__label%5C%22%20id%3D%5C%22lbl-tf2%5C%22%3EText%20field%3C%2Flabel%3E%5Cn%20%20%20%20%3Cp%20class%3D%5C%22c-text-field__helper-text%20is-displayed%5C%22%3EHelper%20text%20(possibly%20validation%20message)%3C%2Fp%3E%5Cn%3C%2Fdiv%3E%5Cn%5Cn%3C!--%20dirty%20state%20--%3E%5Cn%3C!--%20HACK%20NOTE%3A%20remove%20the%20inline%20style%20for%20width%20when%20using%20this%20component%20--%3E%5Cn%3Cdiv%20class%3D%5C%22c-text-field%5C%22%20style%3D%5C%22width%3A%20280px%3B%5C%22%3E%5Cn%20%20%20%20%3Cinput%20%5Cn%20%20%20%20%20%20%20%20class%3D%5C%22c-text-field__input%5C%22%20%5Cn%20%20%20%20%20%20%20%20type%3D%5C%22text%5C%22%20%5Cn%20%20%20%20%20%20%20%20id%3D%5C%22tf-box-dirty%5C%22%5Cn%20%20%20%20%20%20%20%20value%3D%5C%22Bacon%20ipsum%20awesomeness.%5C%22%20%5Cn%20%20%20%20%2F%3E%5Cn%20%20%20%20%3Clabel%20for%3D%5C%22tf-box-dirty%5C%22%20class%3D%5C%22c-text-field__label%20is-dirty%5C%22%3EText%20field%3C%2Flabel%3E%5Cn%20%20%20%20%3Cp%20class%3D%5C%22c-text-field__helper-text%5C%22%3EHelper%20text%20(possibly%20validation%20message)%3C%2Fp%3E%5Cn%3C%2Fdiv%3E%5Cn%5Cn%3C!--%20helper%20text%20--%3E%5Cn%3C!--%20HACK%20NOTE%3A%20remove%20the%20inline%20style%20for%20width%20when%20using%20this%20component%20--%3E%5Cn%3Cdiv%20class%3D%5C%22c-text-field%5C%22%20style%3D%5C%22width%3A%20280px%3B%5C%22%3E%5Cn%20%20%20%20%3Cinput%20%5Cn%20%20%20%20%20%20%20%20class%3D%5C%22c-text-field__input%5C%22%20%5Cn%20%20%20%20%20%20%20%20type%3D%5C%22text%5C%22%20%5Cn%20%20%20%20%20%20%20%20id%3D%5C%22tf-box-helper%5C%22%5Cn%20%20%20%20%20%20%20%20value%3D%5C%22Bacon%20ipsum%20awesomeness.%5C%22%20%20%5Cn%20%20%20%20%2F%3E%5Cn%20%20%20%20%3Clabel%20for%3D%5C%22tf-box-helper%5C%22%20class%3D%5C%22c-text-field__label%20is-dirty%5C%22%3EText%20field%3C%2Flabel%3E%5Cn%20%20%20%20%3Cp%20class%3D%5C%22c-text-field__helper-text%20is-displayed%5C%22%3EHelper%20text%20(possibly%20validation%20message)%3C%2Fp%3E%5Cn%3C%2Fdiv%3E%5Cn%5Cn%3C!--%20error%20state%20--%3E%5Cn%3C!--%20HACK%20NOTE%3A%20remove%20the%20inline%20style%20for%20width%20when%20using%20this%20component%20--%3E%5Cn%3Cdiv%20class%3D%5C%22c-text-field%5C%22%20style%3D%5C%22width%3A%20280px%3B%5C%22%3E%5Cn%20%20%20%20%3Cinput%20%5Cn%20%20%20%20%20%20%20%20class%3D%5C%22c-text-field__input%20has-error%5C%22%20%5Cn%20%20%20%20%20%20%20%20type%3D%5C%22text%5C%22%20%5Cn%20%20%20%20%20%20%20%20id%3D%5C%22tf-box-error%5C%22%20%5Cn%20%20%20%20%20%20%20%20value%3D%5C%22Bacon%20ipsum%20awesomeness.%5C%22%20%5Cn%20%20%20%20%2F%3E%5Cn%20%20%20%20%3Clabel%20for%3D%5C%22tf-box-error%5C%22%20class%3D%5C%22c-text-field__label%20is-dirty%20has-error%5C%22%3EText%20field%3C%2Flabel%3E%5Cn%20%20%20%20%3Cp%20class%3D%5C%22c-text-field__helper-text%20is-displayed%20has-error%5C%22%3EHelper%20text%20(possibly%20validation%20message)%3C%2Fp%3E%5Cn%3C%2Fdiv%3E%5Cn%60%60%60%22%2C%22contentType%22%3A%22pattern%22%2C%22source%22%3A%22lib%2Ftext-field%2Fdemo.js%22%2C%22files%22%3A%5B%22lib%2Ftext-field%2Fdemo.html%22%2C%22lib%2Ftext-field%2Fdemo.js%22%2C%22lib%2Ftext-field%2Freadme.md%22%2C%22lib%2Ftext-field%2Fstyles.scss%22%5D%2C%22path%22%3A%22lib%2Ftext-field%2Fpackage.json%22%2C%22manifest%22%3A%7B%22displayName%22%3A%22Text%20Field%22%2C%22version%22%3A%221.0.0%22%2C%22build%22%3Atrue%2C%22display%22%3Atrue%2C%22flag%22%3A%22alpha%22%2C%22options%22%3A%7B%7D%2C%22name%22%3A%22text-field%22%2C%22description%22%3A%22%22%2C%22tags%22%3A%5B%22text%22%2C%22input%22%2C%22form%22%2C%22control%22%5D%7D%2C%22rawManifest%22%3A%7B%22name%22%3A%22text-field%22%2C%22displayName%22%3A%22Text%20Field%22%2C%22description%22%3A%22%22%2C%22flag%22%3A%22alpha%22%2C%22options%22%3A%7B%7D%2C%22tags%22%3A%5B%22text%22%2C%22input%22%2C%22form%22%2C%22control%22%5D%2C%22version%22%3A%221.0.0%22%7D%2C%22errors%22%3A%5B%5D%7D
Text field
Helper text (possibly validation message)
Text field
Helper text (possibly validation message)
Text field
Helper text (possibly validation message)
Text field
Helper text (possibly validation message)
Text field
Helper text (possibly validation message)