One moment, we're cooking some code examples

   
Header image

Basic form elements

All the basic form elements you need to build your forms and collect data. Use the FormBuilder to create and tag datastreams.

Todo

  • Change the materialize form element to a basic form element for Typestack.
  • Header image
  • Switch: Disabled needs to be worked out. Information by the switches
  • Chips: different ways to style a chip.
  • Range slider: different ways to style a Range slider.
Basic form elements

The styling of the basic form elements

Learn how to style the basic elements of the form.

Input field

The basic styling of the input field with icons, disabled and errors.

Default

Icon

Error

Disabled

Dropdown Selection

The basic styling of the select button. You can change the select button and there are 4 options:

  • Default The default select-button has the same basic styling.

  • Data icons With the data icon you can add images inside the select-button.

  • Check box You can use checkboxes inside the select-button.

  • Optgroup With the Optgroup you can group your selection inside the select-button.

Inside the code block can you see how to make each different select button.

for the images you need to set the width and height to make the image smaller and square.

Default

Data icon

Checkbox

Optgroup

Error

Disabled

Text area

Styling of the text area is almost the same as the input field except for the textarea element.

Default

Error

Disabled

Radio button

There are 2 different radio buttons one that is solid and the other with a gap. You can add the gap with the class with-gap in the input.

Solid

Gap

Check box

There are 2 main styles Default and the filled-in. For the filled-in we also have the option to make it a solid colour by adding the class CheckSolid. By adding checked="filled-in" the checkbox wil be already checked.

Default

Filled in

Error

Switch

Styling switches.

Default

Icons

Chips

For the chips we have 3 options and an extra option is that you can toggle the chip. This is done with .... When you toggle the chip the styling wil change when toggled.

To make a chip removable, we add the i element within the chip element. When you add the class close along with the icons fa-light and fa-xmark the chips become removable

To add the chips from the text field, use the <div class="chips chips-placeholder>

With JavaScript we made it possible to make the chip active a with a click on the chip you can change the state of the chip.

Chips are not a standard input field. To get them to the handler we need to add some extra steps. In the form submit function (JS) we get the chips form the input element through a selector. To get the chips out of the selected object you can use the .chips('getData') function.

Default chip

Default
Disabled
Error

Toggle chip

Default
Disabled
Error

Text to chip

Range slider

Information




Multi select

Information