Label

Associate visible descriptive text with a form field

Label creates a semantic HTML label for an Input, Date Picker, Select, or other named field. A correctly connected label helps visitors understand and activate the field.

How to Use Label

You’ll find Label under Forms in the Components list.

1. Place Label inside a Form, close to its field.
2. Edit the label text directly on the canvas.
3. Copy the field’s Name exactly.
4. Enter that value under Label → For.
5. Preview the published form and click the label to confirm that its field receives focus.

Component Settings

Settings

For defaults to inputName.

Replace it with the exact Name of the related field. Values are case-sensitive:

email

If the Input Name is email but Label For is Email, they are not connected.

Text Styles

Color defaults to Text 50.

Align is not responsive, offers Start, Centre, or End, and defaults to Start.

Shared text-style defaults include Body Font, Base Size, weight 400, Normal spacing and line height, no text shadow, no case conversion, and no decoration.

Accessibility

Use a visible Label for every field. Keep it descriptive and concise; Placeholder text disappears during entry and is not a replacement for a label.

Troubleshooting

Clicking the label does not focus the field

Make sure For and the field Name are identical, with no spaces added before or after either value.

Related Components

• Input — Collects a typed value.
• Date Picker — Collects a date and optional time.
• Select — Presents a list of choices.

Common Control	Description
Link	Link to a page, resource, anchor, email address, or website.
Layout	Control positioning, stacking, visibility, overflow, and isolation.
Sizing	Set width, height, and responsive size constraints.
Spacing	Add responsive margin and padding.
Typography & Text Styles	Control fonts, text spacing, decoration, colour, and semantic wrappers.
Backgrounds	Apply colour, image, gradient, SVG, video, and hover backgrounds.
Transitions	Choose what animates and set its timing curve, duration, and delay.
Effects	Apply shadows, opacity, and hover effects.
Filters	Apply blur, brightness, saturation, shadow, and backdrop effects.
Transforms	Scale, rotate, move, and skew components.
Borders	Set border style, colour, opacity, width, radius, and hover states.
Advanced	Add CSS classes and IDs, or change supported HTML tags.