Input types

Here list all the input types that are ready to use. Set the type to one of the following value to create an input with that type.

• checkbox
• date
• number
• password
• radio
• range
• select
• switch
• text
• textarea

If not provided, text will be used.

---

Text

---

Number

Set type to number will build input with type="number". We can also use mask to achieve the same result. The mask feature is powered by imaskjs. See Input mask for more.

---

Password

---

Checkbox / Radio

Use options.data to provide static options. For dynamic options, see Dynamic options from API endpoint.

Checkbox

Provide only one option to build binary checkbox.

Radio

Label position

Place label at start by setting the options.labelPosition to before. Default is after.

Layout

Set options.layout to column to display options vertically, the default is row. There is also options.containerClass and options.containerStyles available to create other layout. e.g. display: grid; grid-tempalate-columns: ...

---

Select

Use options.data to provide static options. For dynamic options, see Dynamic options from API endpoint.

---

Switch

---

Date

---

Textarea

---

Range

More Types

If the built-in types are not enough to cover the needs, we can:

• Extend the type
• Replace the component to be used for the existing type

See Extend or Overwrite UI components.