Form

The form controls

---

Examples

Input box types

Input Color

Input Date

Input Datetime-local

Input Email

Input File

Input Month

Input Number

Input Password

Input Range

Input Search

Input Tel

Input Text

Input Time

Input Url

Input Week

With attributes

Input text readonly

Input text disabled

The help message about this form input.

Input text invalid

Add rd-input-invalid class to the input.

Source

Input file

Input single file

Choose file

Input multiple files

Choose files

Input file disabled

Choose file

The help message about this form input.

Input file invalid

Choose file

Add rd-input-invalid class to the input.

Submit (see console)

Source

Dynamically insert/update input file

Click here to add an input file

Custom input file events

Event type	Description
rdta.custominputfile.addedfilesqueue	This event is fired when files queue were added.
rdta.custominputfile.change	This event is fired when input file has changed.

Source

document.addEventListener('rdta.custominputfile.change', (event) => {console.log(event);}));
document.addEventListener('rdta.custominputfile.addedfilesqueue', (event) => {console.log(event);}));

Checkbox/radio

Input radio

Input radio option 1
Input radio option 2
Input radio option 3 disabled
Input radio option 3 invalid

The help message about this form input.

Input radio inline

1 2 3 disabled

Input checkbox

Input checkbox 1
Input checkbox 2
Input checkbox 3 disabled
Input checkbox 3 invalid

Input checkbox inline

1 2 3

The help message about this form input.

Source

Select box

Select box

1 2 3 1 2 3 out of optgroup

Select box multiple

1 2 3 1 2 3 out of optgroup

Select box disabled

1 2 3

Select box invalid

1 2 3

Add rd-input-invalid class to the select box.

Source

Text area

Textarea

Textarea disabled

Textarea invalid

Source

---

Horizontal form

To make form fields display horizontal, just add horizontal class to the form element.

Input text

The help message about this form input.

Input checkbox/radio

Input radio

Input radio option 1
Input radio option 2

Input radio inline

1 2

Input checkbox

Input checkbox 1
Input checkbox 2

Input checkbox inline

1 2

Select box

1 2 3 1 2 3 out of optgroup The super very long option. Donec varius laoreet purus in mollis. Ut ut nisi in metus elementum sollicitudin vel eu eros. Aliquam varius velit libero, a ornare ligula posuere a. Ut posuere sapien vel nisi porta, eu facilisis ex egestas. Curabitur pharetra nisi vel condimentum tempor. Donec vestibulum blandit risus, ac porttitor mi tempor nec. Quisque ac nunc risus.

Textarea

Save Cancel

Source

---

Sizes

Input

Source

Select box

normal small large

Source

Input

The help message about this form input.

Input small

The help message about this form input.

Input large

The help message about this form input.

---

Input group

The input group must be use with form class rd-form and elements with classes form-group control-wrapper

฿

Price

$

.00

each

Textarea

@

Source

Sizes

normal

small

large

Source

With button

Button

Dropdown

• Save
• Save & Publish
• Cancel

Source