Field: TextField

Preamble

The TextField is an input for single line text.

Properties

Along with the default element properties this field has the following properties:

{
  placeholder?: string,
  mode: "text" | "password" | "color" | "date" | "time" | "datetime" | "week" | "email" | "month" | "number" | "tel" | "url" | "hidden",
  step?: number
}

Name	Description	Required	Default
placeholder	Text that is displayed in the field if no value is submitted. Does not influence the value of the field.	❌	""
mode	The input mode of the text field. While HTML supports more than these types only the ones above are offically supported by the TextField input.	❌	"text"
step	If the mode is number, some platforms display little arrows to increase or decrease the value. This allows you to specify by how much.	❌	1

Don't drink too much cool-aid!

The modes are primarily meant of change how the value is entered, but do not limit which values are entered. Make sure to add an appropriate validator to your field.

Example

import TextField from '@react-formilicious/bulma/TextField';

{
  type: TextField,
  key: "password",
  name: "🤨 Enter your secure password",
  mode: "password",
  placeholder: "Hint: It's probably 'password'."
}