vue-formulario/examples/specimens/SpecimenText.vue

<template>
  <div class="specimens specimens--text">
    <h2>Text classifications</h2>
    <div class="specimen">
      <h3>Color</h3>
      <FormulateInput
        label="Pick a color?"
        type="color"
        help="Choose your favorite."
      />
    </div>
    <div class="specimen">
      <h3>Date</h3>
      <FormulateInput
        label="Select a day."
        type="date"
        help="Choose your birthday."
      />
    </div>
    <div class="specimen">
      <h3>Datetime-local</h3>
      <FormulateInput
        label="Select a day and time."
        type="datetime-local"
        help="When is the meeting?"
      />
    </div>
    <div class="specimen">
      <h3>Email</h3>
      <FormulateInput
        label="What is your email?"
        type="email"
        placeholder="placeholder@example.com"
        help="What is your email address?"
      />
    </div>
    <div class="specimen">
      <h3>Month</h3>
      <FormulateInput
        label="Favorite month"
        type="month"
        help="When is Christmas?"
      />
    </div>
    <div class="specimen">
      <h3>Number</h3>
      <FormulateInput
        label="How old are you?"
        type="number"
        placeholder="25"
        help="Select your age"
      />
    </div>
    <div class="specimen">
      <h3>Password</h3>
      <FormulateInput
        label="Enter a password."
        type="password"
        help="Choose something long and tricky."
      />
    </div>
    <div class="specimen">
      <h3>Search</h3>
      <FormulateInput
        label="But I still haven't found."
        type="search"
        placeholder="What im looking for..."
        help="I have climbed the highest mountains."
      />
    </div>
    <div class="specimen">
      <h3>Tel</h3>
      <FormulateInput
        label="Oh you like Mike & Ikes?"
        type="tel"
        placeholder="Can I have you number..."
        help="Can I have it?"
      />
    </div>
    <div class="specimen">
      <h3>Time</h3>
      <FormulateInput
        label="What time is dinner?"
        type="time"
        placeholder="Pick a time"
        help="When will you eat your food?"
      />
    </div>
    <div class="specimen">
      <h3>Text</h3>
      <FormulateInput
        label="Username"
        type="text"
        placeholder="Username"
        help="Select a username"
      />
    </div>
    <div class="specimen">
      <h3>Url</h3>
      <FormulateInput
        label="Personal website"
        type="url"
        placeholder="https://"
        help="What is the url for your website?"
      />
    </div>
    <div class="specimen">
      <h3>Week</h3>
      <FormulateInput
        label="I don’t know who would use this field."
        type="week"
        placeholder="Pick a week"
        help="What week is it?"
      />
    </div>
  </div>
</template>