Basic Elements

Checkbox

Creates a checkbox - a small box that users can check or uncheck.

• Use-Cases: Used for binary choices, like agreeing to terms or selecting preferences.
• Class: form-check-input

You can edit the Title of the button by editing the Title field in the Attributes pane, but it has no significance as the value of Title is not visible

Edit the HTML attributes of the button inside the Class field and all CSS attributes in the Style field

Floating Label

Creates a label that animates or moves when users interact with associated form elements.

• Use-Cases: Enhances form fields with a dynamic label for better user experience.
• Class: form-control

Edit the underlying text of the Floating label by editing the Placeholder field in the Attributes pane

You can apply custom validations to this label by selecting an option from the Validation dropdown or apply your custom validation using regex, etc. in the Custom Validation field

Edit the HTML attributes of the button inside the Class field and all CSS attributes in the Style field

Horizontal Rule

Creates a horizontal line to separate content.

• Use-Cases: Used for visual separation of content sections.
• Class: No class associated to by default

Edit the label of the button by editing the Caption field in the Attributes pane

Edit the HTML attributes of the button inside the Class field and all CSS attributes in the Style field

Image

Creates an image placeholder on the Canvas.

• Use-Cases: Used to display visual content or graphics.
• Class: img-fluid

To add an image to the placeholder, click on the Src field and select the image from your current file-system on Quickappz

Edit the alternate text of the image by editing the Alt field in the Attributes pane

Edit the HTML attributes of the button inside the Class field and all CSS attributes in the Style field

Input

Creates an input field for users to enter data.

• Use-Cases: Used in forms for user input.
• Class: form-control

Edit the label of the button by editing the Caption field in the Attributes pane

Edit the HTML attributes of the button inside the Class field and all CSS attributes in the Style field

Label

Creates a label for form elements or other content.

• Use-Cases: Labels provide context and description for associated elements.
• Class: Often associated with the label class.

Edit the label of the button by editing the Caption field in the Attributes pane

Edit the HTML attributes of the button inside the Class field and all CSS attributes in the Style field

List (Unordered & Ordered)

Creates an unordered or ordered list of items.

• Use-Cases: Used for presenting and organizing lists of items.
• Class: Associated with list-related classes.

Radio

Creates a radio button - a small, round option that users can select.

• Use-Cases: Used for exclusive choices in a group.
• Class: Typically associated with the radio button class.

Edit the label of the button by editing the Caption field in the Attributes pane

Edit the HTML attributes of the button inside the Class field and all CSS attributes in the Style field

Range

Creates a slider input for selecting a numeric value within a range.

• Use-Cases: Used for selecting values within a specified range.
• Class: May belong to input or slider-related classes.

Edit the label of the range input by editing the Caption field in the Attributes pane

Edit the HTML attributes of the range input inside the Class field and all CSS attributes in the Style field

Select

Creates a dropdown select input.

• Use-Cases: Used for selecting options from a list.
• Class: Belongs to the select or dropdown-related classes.

Edit the label of the select input by editing the Caption field in the Attributes pane

Edit the HTML attributes of the select input inside the Class field and all CSS attributes in the Style field

Switch

Creates a switch - a toggle between two states.

• Use-Cases: Used when a binary option needs to be turned on or off.
• Class: May belong to the switch or toggle-related classes.

Edit the label of the switch by editing the Caption field in the Attributes pane

Edit the HTML attributes of the switch inside the Class field and all CSS attributes in the Style field

Text Area

Creates a multiline text input area.

• Use-Cases: Used for capturing larger amounts of text input.
• Class: Belongs to the text area or input-related classes.

Edit the label of the text area by editing the Caption field in the Attributes pane

Edit the HTML attributes of the text area inside the Class field and all CSS attributes in the Style field

Span

Creates an inline container for text or other inline elements.

• Use-Cases: Used for applying styles or interactions to inline content.
• Class: Often associated with inline or text-related classes.

Edit the label of the span by editing the Caption field in the Attributes pane

Edit the HTML attributes of the span inside the Class field and all CSS attributes in the Style field