# Text

The text classification is given to the following types:

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(opens new window) 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 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 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 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 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 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 help text

Accessibility tip

It may be preferable(opens new window) 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 help text

Tip

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

<FormulateInput
  type="search"
  name="sample"
  label="Sample search input"
  placeholder="Sample search placeholder"
  help="Sample search help text"
/>
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 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 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 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 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 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.