For the complete documentation index, see llms.txt. This page is also available as Markdown.

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.

  • 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.

Last updated

Was this helpful?