# 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 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 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.