Text

The text classification is given to the following types:

• color
• date
• datetime-local
• email
• hidden
• month
• number
• password
• search
• tel
• time
• text
• url
• week

Important

These inputs are all standard HTML inputs, and while we encourage their use for semantic and accessibility reasons, some of them are not supported in all browsers. Consider using a polyfill, plugin, or custom input on a type-by-type basis.

Color

<FormulateInput
  type="color"
  name="sample"
  label="Sample color input"
  placeholder="Sample color placeholder"
  help="Sample color help text"
  validation="required"
  value="#3eaf7c"
  error-behavior="live"
/>

Sample color input

Sample color help text

Date

<FormulateInput
  type="date"
  name="sample"
  label="Sample date input"
  placeholder="Sample date placeholder"
  help="Sample date help text"
  validation="required|after:2019-01-01"
  min="2018-12-01"
  max="2021-01-01"
  error-behavior="live"
/>

Sample date input

Sample date help text

Datetime-local

<FormulateInput
  type="datetime-local"
  name="sample"
  label="Sample datetime-local input"
  placeholder="Sample datetime-local placeholder"
  help="Sample datetime-local help text"
  validation="required"
/>

Sample datetime-local input

Sample datetime-local help text

Warning

Please note that the datetime-local HTML input element has questionable support at the moment due to the lack of Firefox support.

Email

<FormulateInput
  type="email"
  name="sample"
  label="Sample email input"
  placeholder="Sample email placeholder"
  help="Sample email help text"
  validation="required|email"
  error-behavior="live"
/>

Sample email input

Sample email help text

Hidden

While technically Vue Formulate does support hidden input fields, the use case is pretty minimal since you can easily inject your own "hidden" values into submitted data with a form submission.

<FormulateInput
  type="hidden"
  name="sample"
  value="secret-code"
/>

Month

<FormulateInput
  type="month"
  name="sample"
  label="Sample month input"
  placeholder="Sample month placeholder"
  help="Sample month help text"
  validation="required|after:2019-01-01"
  min="2018-12"
  max="2021-01"
  error-behavior="live"
/>

Sample month input

Sample month help text

Number

<FormulateInput
  type="number"
  name="sample"
  label="Sample number input"
  placeholder="Sample number placeholder"
  help="Sample number help text"
  validation="required|number|between:10,20"
  min="0"
  max="100"
  error-behavior="live"
/>

Sample number input

Sample number help text

Accessibility tip

It may be preferable to use a text input rather than a number input for accessibility reasons. You can use the inputmode="numeric" and pattern="[0-9]*" attributes to force a number keypad for mobile users.

Password

<FormulateInput
  type="password"
  name="sample"
  label="Sample password input"
  placeholder="Sample password placeholder"
  help="Sample password help text"
  validation="required|min:10,length"
  validation-name="Password"
  error-behavior="live"
/>

Sample password input

Sample password help text

Tip

Password inputs work well when paired with a FormulateForm and the confirm validation rule.

Search

<FormulateInput
  type="search"
  name="sample"
  label="Sample search input"
  placeholder="Sample search placeholder"
  help="Sample search help text"
/>

Sample search input

Sample search help text

Tel

<FormulateInput
  type="tel"
  name="phone"
  label="Sample tel input"
  placeholder="Sample tel placeholder"
  help="Sample tel help text"
  validation="required"
/>

Sample tel input

Sample tel help text

Time

<FormulateInput
  type="time"
  name="sample"
  label="Sample time input"
  placeholder="Sample time placeholder"
  help="Sample time help text"
  validation="required"
/>

Sample time input

Sample time help text

Text

<FormulateInput
  type="text"
  name="sample"
  label="Sample text input"
  placeholder="Sample placeholder"
  help="Sample help text"
  validation="required"
  error-behavior="live"
/>

Sample text input

Sample help text

Url

<FormulateInput
  type="url"
  name="sample"
  label="Sample url input"
  placeholder="Sample url placeholder"
  help="Sample url help text"
  validation="required"
/>

Sample url input

Sample url help text

Week

<FormulateInput
  type="week"
  name="sample"
  label="Sample week input"
  placeholder="Sample week placeholder"
  help="Sample week help text"
  validation="required"
/>

Sample week input

Sample week help text

Warning

Please note that the week HTML input element has particularly poor support at the moment due to the lack of iOS support.