- var title = "Text Fields"
- var path  = "../"
include ../_base
  prepend contents

    :markdown
      ##Text Field Line

    .TextField.isActive
      p.label 氏名
      input(type="text", placeholder="銭　亀太郎", maxlength="20", required)
      p.validated この項目は必須です。
    .TextField.isError
      p.label 郵便番号
      input(type="text", placeholder="000-0000", maxlength="20", required)
      p.validated この項目は必須です。
    .TextField.isOK
      p.label 住所
      input(type="text", maxlength="20")
    .TextField
      p.label 電話番号
      input(type="text", maxlength="20")

    :markdown
      ```jade
      .TextField.isActive
        p.label 氏名
        input(type="text", placeholder="銭　亀太郎", maxlength="20", required)
        p.validated この項目は必須です。
      .TextField.isError
        p.label 郵便番号
        input(type="text", placeholder="000-0000", maxlength="20", required)
        p.validated この項目は必須です。
      .TextField.isOK
        p.label 住所
        input(type="text", maxlength="20")
      ```


    :markdown
      ##Text Field Line Box

    .TextField.isActive
      p.label 氏名
      input.box(type="text", placeholder="銭　亀太郎", maxlength="20", required)
      p.validated この項目は必須です。
    .TextField.isError
      p.label 郵便番号
      input.box(type="text", placeholder="000-0000", maxlength="20", required)
      p.validated この項目は必須です。
    .TextField.isOK
      p.label 住所
      input.box(type="text", maxlength="20")
    .TextField
      p.label 電話番号
      input.box(type="text", maxlength="20")

    :markdown
      ```jade
      .TextField.isActive
        p.label 氏名
        input.box(type="text", placeholder="銭　亀太郎", maxlength="20", required)
        p.validated この項目は必須です。
      .TextField.isError
        p.label 郵便番号
        input.box(type="text", placeholder="000-0000", maxlength="20", required)
        p.validated この項目は必須です。
      .TextField.isOK
        p.label 住所
        input.box(type="text", maxlength="20")
      .TextField
        p.label 電話番号
        input.box(type="text", maxlength="20")
      ```


    :markdown
      ##Text Field Area

    .TextField
      p.label._lg 氏名
      textarea(required)

    :markdown
      ```jade
      .TextField
        p.label._lg 氏名
        textarea(required)
      ```