Fields

Label

The foundation of every form

A Label is a static text element that describes, identifies, or provides context for a form field. Think of it as a signpost – it tells the user what information they should enter, why it matters, and how they should format it. Without Labels, forms become confusing and frustrating to use. With Labels, forms become intuitive, accessible, and welcoming.

Labels are the unsung heroes of good form design. They do not accept input themselves – they are purely informational – but they are essential for creating a smooth user experience. A well‑designed Label can significantly reduce user errors, increase completion rates, and make your forms feel more professional.

• Clarity – tells the user exactly what is expected.
• Accessibility – screen readers rely on Labels to describe form fields.
• Guidance – provides instructions, examples, and context.
• Branding – contributes to the overall look and feel of your template.

Anatomy of a Label – Label Title, Description, Required Indicator, and Placeholder

When to Use a Label

Labels are used in almost every form. Here are the most common use cases:

Default State: No Field Type

When you first create an element in Diterr – whether it is a Textbox, Quote, or Image – it has no field type assigned. This means the element is purely visual and decorative. It is not yet a Label or an Input, and it does not interact with form data.

• Flexibility – not every text element needs to be a field. You might use text for headings, descriptions, or purely decorative content.
• Intentionality – you have to explicitly decide when an element should become a field. This prevents accidental field creation and keeps your templates organised.

Anatomy of a Label

A Label consists of several components that work together to provide a complete, usable, and accessible form field:

Label Settings

Label Title

The main text displayed on the Label. It is the primary way you communicate to the user what information is expected.

• Be clear and concise – use language that is easy to understand. Avoid jargon.
• Use sentence case or title case – choose one style and stick to it consistently.
• Keep it short – a few words are usually enough. Use Description for additional context.
• Think like your user – use the same phrasing your users would use.

Description

Provides additional context, instructions, or guidance to the user. Appears below the Label Title in a smaller, lighter font.

• Provide examples – show users what a valid value looks like (e.g., "e.g., john@doe.com").
• Explain why – tell users why the information is needed.
• Set expectations – let users know what to expect.
• Keep it short – one or two sentences is usually enough.

Required Indicator

A symbol or text that visually marks the field as required. Appears next to the Label Title.

• "*" – the most common and recognizable indicator.
• "(required)" – explicit and clear for international audiences.
• "(optional)" – used to mark optional fields instead (less common).
• Be consistent – use the same indicator style across all fields.

Placeholder

Placeholder text that appears inside the associated input field when empty. Provides an example of the expected format or content.

• Provide examples – show users what to type (e.g., "john@doe.com").
• Give formatting hints – indicate the expected format (e.g., "MM/DD/YYYY").
• Keep it short – placeholders should be brief and to the point.
• Do not rely on placeholders – they disappear when the user starts typing.

Creating a Label: Step‑by‑Step

1. Add an Element – add a Textbox, Quote, or Image element to the canvas.
2. Select the Element – click the element to select it.
3. Open the Edit Field Modal – click the "Edit Field" button in the Properties Panel.
4. Set the Field Type – select Label from the dropdown.
5. Configure Label Settings – enter Label Title, Description, Required Indicator, and Placeholder.
6. Save Changes – click "Save changes" to apply.

The Edit Field modal with Label selected as the Field Type

Label & Input Relationship

A Label is most commonly used together with an Input field. The Label provides context, and the Input captures the user's response. When you use a Label and an Input together, you create a complete, usable form field.

• Create a Label – with the desired Label Title, Description, etc.
• Create an Input – set its Associated Label to the Label you created.
• Benefits – improved accessibility, screen reader support, and visual grouping.

Accessibility Considerations

Labels are one of the most important elements for web accessibility. Follow these key principles:

• Always use Labels – every form input must have an associated Label for screen readers.
• Use clear, descriptive text – avoid vague terms like "Input" or "Enter text".
• Position Labels correctly – place them close to their associated input, typically above or to the left.
• Provide Required Indicators – clearly mark required fields so users know which are mandatory.
• Use Descriptions for additional context – provide formatting guidelines or explanations.
• Ensure colour contrast – Labels should have sufficient contrast against their background.

Best Practices

Summary

Labels are the foundation of every well‑designed form. They provide clarity, accessibility, and guidance, making it easy for users to understand what is expected of them.

• Labels – static text elements that describe and identify form fields.
• Common uses – field titles, section headings, helper text, required indicators.
• Default state – elements start with no field type; you must explicitly set them to Label.
• Settings – Label Title, Description, Required Indicator, Placeholder.
• Accessibility – always link Labels to Inputs for better accessibility.
• Best practices – be clear, be consistent, and always use Labels with Inputs.

Now that you understand Labels, you are ready to build forms that are clear, accessible, and user‑friendly. 🎨

↑ Back to top

Input

The interactive heart of every form

An Input is an interactive field that accepts user input. It is the primary means by which users provide data to your template – whether they are typing text, selecting options, uploading files, or choosing dates. Inputs are what make your forms dynamic, functional, and useful.

Inputs come in many forms, each optimized for a specific type of data or user interaction. From simple text boxes to complex file uploads, Diterr provides a comprehensive set of input types that cover virtually every use case.

• Data collection – capture the information you need from users.
• User interaction – provide a way for users to engage with your form.
• Validation – ensure data is complete and correctly formatted.
• Flexibility – adapt to different data types and use cases.

Anatomy of an Input – Input Element, Field Name, Placeholder, and Validation

When to Use an Input

Inputs are used whenever you need to collect data from users. Here are the most common use cases:

Default State: No Field Type

When you first create an element in Diterr – whether it is a Textbox, Quote, or Image – it has no field type assigned. This means the element is purely visual and decorative. It is not yet a Label or an Input, and it does not interact with form data.

• Flexibility – not every text element needs to be a field. You might use text for headings, descriptions, or purely decorative content.
• Intentionality – you have to explicitly decide when an element should become a field. This prevents accidental field creation and keeps your templates organised.

Anatomy of an Input

An Input consists of several components that work together to collect and validate user data:

Input Settings

Field Name / Key

The identifier for this field in the form data. When a form is submitted, the data is sent as key‑value pairs – the Field Name is the key.

• Be descriptive – choose a name that clearly indicates the purpose of the field.
• Use consistent case – use snake_case, camelCase, or kebab-case consistently.
• Avoid spaces – use underscores or camelCase instead of spaces.
• Keep it short – long names are harder to work with.

Input Type

Determines what kind of input the field accepts and how it behaves.

• Textbox – standard text input.
• Textarea – multi‑line text input.
• Select – dropdown menu.
• Radio – radio buttons.
• Checkbox – checkboxes.
• File – file upload.
• Number – numeric input.
• Email – email input with validation.
• Tel – telephone input.
• URL – URL input with validation.
• Date – date picker.
• Time – time picker.

Default Value

A pre‑filled value that appears in the input when the form is first loaded.

• Pre‑fill known data – if you know the user's email, pre‑fill it.
• Set a default selection – pre‑select a common option in a dropdown.
• Provide examples – show users what a valid value looks like.

Placeholder

Placeholder text that appears inside the input when it is empty.

• Provide examples – show users what to type (e.g., "john@doe.com").
• Give formatting hints – indicate the expected format (e.g., "MM/DD/YYYY").
• Keep it short – placeholders should be brief and to the point.
• Do not rely on placeholders – they disappear when the user starts typing.

Associated Label

Associate the Input with a Label element for accessibility. Screen readers will announce the Label when the Input is focused.

• Accessibility – screen readers announce the Label when the Input is focused.
• Usability – users can click on the Label to focus the Input.
• Best practice – always associate Inputs with Labels.

Options

For Select, Radio, and Checkbox inputs, define the list of choices.

• Enter each option on a new line in the Options field.
• Keep options concise – short, clear options are easier for users.
• Order matters – the first option is often the default.

Accepted File Types

For File Upload inputs, restrict which file types users can upload.

• Available types: .jpg, .jpeg, .png, .gif, .webp, .bmp, .svg, .tiff, .ico, .avif, .heic
• Best practice: Always restrict file types to the minimum necessary for your use case.

Creating an Input: Step‑by‑Step

1. Add an Element – add a Textbox, Quote, or Image element to the canvas.
2. Select the Element – click the element to select it.
3. Open the Edit Field Modal – click the "Edit Field" button in the Properties Panel.
4. Set the Field Type – select Input from the dropdown.
5. Configure Input Settings – set Field Name, Input Type, Default Value, Placeholder, Options, Validation, etc.
6. Save Changes – click "Save changes" to apply.

The Edit Field modal with Input selected as the Field Type

↑ Back to top

Label & Input

The complete form field in one package

A Label & Input is a combined field type that includes both a Label (static descriptive text) and an Input (interactive field) in one element. Instead of creating separate Label and Input elements and linking them together, you can create a single element that does both.

Think of it as a pre‑assembled form field – it comes with everything you need: the title, the description, the required indicator, and the interactive input itself. This makes it ideal for simple, straightforward forms where each field has a clear label and you want to keep things compact and consistent.

• Efficiency – one element instead of two, saving time and reducing complexity.
• Compactness – ideal for tight layouts where space is at a premium.
• Consistency – Label and Input share the same container and styling, ensuring a unified look.
• Automatic linking – the Label is automatically associated with the Input, improving accessibility.

Anatomy of a Label & Input – Label Title, Description, Required Indicator, and Input Element

When to Use Label & Input

Default State: No Field Type

When you first create an element in Diterr – whether it is a Textbox, Quote, or Image – it has no field type assigned. This means the element is purely visual and decorative. It is not yet a Label, an Input, or a Label & Input, and it does not interact with form data.

• Flexibility – not every text element needs to be a field. You might use text for headings, descriptions, or purely decorative content.
• Intentionality – you have to explicitly decide when an element should become a field. This prevents accidental field creation and keeps your templates organised.

Anatomy of a Label & Input

A Label & Input combines all the components of both a Label and an Input into a single, unified element:

Settings

A Label & Input includes all settings from both Label and Input.

Creating a Label & Input: Step‑by‑Step

1. Add an Element – add a Textbox, Quote, or Image element to the canvas.
2. Select the Element – click the element to select it.
3. Open the Edit Field Modal – click the "Edit Field" button in the Properties Panel.
4. Set the Field Type – select Label & Input from the dropdown.
5. Configure Label Settings – enter Label Title, Description, Required Indicator, and Placeholder.
6. Configure Input Settings – set Field Name, Input Type, Default Value, Options, Validation, etc.
7. Save Changes – click "Save changes" to apply.

The Edit Field modal with Label & Input selected as the Field Type

Label & Input vs. Separate Label + Input

Here's how Label & Input compares to using separate Label and Input elements:

Best Practices

Summary

The Label & Input field type brings together the best of both worlds – the descriptive power of a Label and the interactivity of an Input – in a single, compact element. It is the ideal choice for simple, consistent, and space‑efficient forms.

• Combines Label and Input into one element.
• Includes all Label settings (Title, Description, Required Indicator, Placeholder).
• Includes all Input settings (Field Name, Input Type, Default Value, Options, Validation, etc.).
• Automatic linking – label and input are always correctly associated.
• Ideal for – simple forms, compact layouts, consistent styling, quick prototyping.
• Best practice – use for straightforward, single‑field forms where space is limited.

Now that you understand Label & Input, you have a complete toolkit for building forms – from simple contact forms to complex surveys. Choose the field type that best fits your needs and start building. 🚀

↑ Back to top