Components & inputs

Components are the building blocks inside a section — the text, images, layout wrappers, buttons, and form fields you assemble into a page. This page lists every component available in the Components tab, grouped as you'll find them: Layout, Display, and Input.

Each component has a friendly display name (shown in the palette and outline) and a set of props you edit in the inspector. Where a component is a container, it can hold children; drop other components inside it.

Layout

Layout components arrange other components. They're containers.

Component	Palette name	What it does
Box	Block	Plain container — group elements vertically
Row	Row	Horizontal group; children sit side-by-side
Stack	Stack	Vertical or horizontal group with even spacing
Layer	Layer	Free-positioning surface for overlapping elements
Container	Centered wrap	Caps page width and centres content
Paper	Surface	Card-like surface with elevation or border
Grid	Grid	CSS-grid container with responsive columns
Card	Card	Boxed content with shadow and padding
Divider	Divider	Horizontal (or vertical) rule between groups
Accordion	Accordion	Expandable title/body panels
Tabs	Tabs	Tabbed navigation between panels
Steps	Multi-step form	A wizard — each child is one step, shown one at a time
Spacer	Spacer	An empty vertical gap of a set height

Key props:

• Stack — direction (row / column / reversed), spacing, alignItems, justifyContent.
• Container — maxWidth (xs–xl, or false for none), disableGutters.
• Grid — container, item, spacing, and per-breakpoint column spans xs / sm / md / lg.
• Paper / Card — variant (elevation or outlined), plus elevation / raised.
• Accordion — items (one title | body per line), defaultExpanded.
• Tabs — items (one label per line), orientation, variant, centered.
• Steps — showStepper, labels (one step label per line), nextLabel, backLabel, finishLabel. Put a Steps inside a Form; each direct child of Steps is one page of the wizard. On the live page visitors move through the steps with Back / Next (each step's required fields are checked before advancing) and the final Finish submits the whole form — hidden steps still submit their fields. In the designer every step is shown stacked so you can edit them all. (A statically exported copy shows all steps on one page — the wizard navigation needs the live renderer.)
• Spacer — size (height in pixels).

TIP

Row and Stack cover most layouts. Reach for Grid only when you need columns that reflow across breakpoints, and Container to keep a section's content from stretching too wide on large screens.

Display

Display components show content. Most are not containers.

Component	Palette name	What it does
Typography	Text	Headings, paragraphs, captions
Alert	Alert	Inline notice — info / warning / error / success
Chip	Tag	A small labelled pill
Avatar	Avatar	Round profile image or initial
Link	Link	A clickable text link
List	List	A bulleted or plain item list
Image	Image	A picture
Video	Video	An embedded mp4 / webm video
Embed	Embed	A sandboxed iframe from a URL or raw HTML
Icon	Icon	Any unicode symbol or emoji

Key props:

• Typography — text, variant (h1–h6, subtitle1/2, body1/2, caption, overline, button), align, color, gutterBottom, noWrap. Its text supports inline rich editing.
• Alert — text, severity (error / warning / info / success), variant (standard / filled / outlined).
• Chip — label, color, variant (filled / outlined), size.
• Avatar — text (an initial), src, alt, variant (circular / rounded / square).
• Link — text, href (an in-project page or URL — see Pages & navigation), target, underline, color.
• Image — src (upload or URL), alt.
• Video — src, poster, controls, autoPlay, loop, muted.
• Embed — src (iframe URL) or html, plus title.
• Icon — symbol (any unicode/emoji), size.

NOTE

A legacy raw-HTML component still renders existing content (sanitized on every render and export) but is hidden from the palette, so no new instances can be added. Use Embed for third-party widgets instead.

Input

Input components collect data. Wrap them in a Form to submit responses to your submissions inbox or a flow.

Component	Palette name	What it does
Button	Button	Action button — submit, link, or custom
TextField	Text input	Single- or multi-line text
Select	Dropdown	A drop-down list of options
Autocomplete	Autocomplete	A searchable type-ahead select for long option lists
Checkbox	Checkbox	A yes/no tick box
Switch	Toggle	An on/off slider
Radio	Radio	A single standalone radio button
RadioGroup	Radio group	A one-of-many question — pick one option
CheckboxGroup	Checkbox group	A multi-choice question — tick any number of options
Slider	Slider	A numeric range slider
Rating	Star rating	A star rating for feedback / reviews
Hidden	Hidden field	A hidden value sent with every submission
FileUpload	File upload	Lets visitors attach a file
FormControl	Field group	Groups a label / input / helper
Form	Form	Container that submits its inputs

Key props:

• Button — text, variant (text / outlined / contained), color, size, type (button / submit / reset), href (link to a page), fullWidth.
• TextField — name (the field key in a submission), label, placeholder, helperText, type (text, number, email, password, tel, url, date, time, datetime-local, month, week), min / max / step (for number and date types), required, pattern (a validation regex), multiline + rows, fullWidth.
• Select — name, label, items (one option per line), variant, fullWidth.
• Autocomplete — name, label, items (one option per line), defaultValue, placeholder, helperText, freeSolo (allow a typed value not in the list), required, fullWidth, disabled. Submits the selected (or typed) value as a string. Best for long lists like countries or tags; the static HTML export uses a native <datalist> for JS-free type-ahead.
• Checkbox / Switch / Radio — label, defaultChecked, color, size, disabled. (Checkbox and Radio also take a name for form binding.)
• RadioGroup — name, label, items (one option per line), defaultValue (pre-selected option), row (lay out horizontally), required, disabled. Submits a single value under name.
• CheckboxGroup — name, label, items (one option per line), defaultValue (pre-checked options, one per line), row, disabled. Submits an array of the checked option values under name. In a showIf condition, name == 'option' is true when that option is checked (and a bare name is true when any option is checked). With JSON submit (the default) the value is a JSON array; if you switch a form to native submit (sendAsJson off) it posts as repeated name= keys, which most backends parse back into an array.
• Slider — name, label, defaultValue, min, max, step, valueLabelDisplay, marks. Submits the chosen number under name.
• Rating — name, label, defaultValue, max (number of stars, default 5), precision (0.5 for half-stars), size, readOnly, disabled.
• Hidden — name, value. Sends a fixed value with every submission — handy for tagging responses with a source page, campaign, or form id. It's invisible on the live page (shown as a small chip in the designer).
• FileUpload — name, label, accept (e.g. image/*,.pdf), helperText, required. Uploaded files are stored securely and linked to the submission — see File uploads.
• Form — method (POST / GET), action (submit URL), successMessage, sendAsJson.

TIP

Give every input a name — that's the key each answer is stored under. A TextField named email shows up as email in your submissions and in any flow you forward the form to.

See also

• Blocks & page templates
• Theme & styling
• Forms & submissions
• Field validation