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
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.
• 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
Checkbox	Checkbox	A yes/no tick box
Switch	Toggle	An on/off slider
Radio	Radio	One-of-many selector
Slider	Slider	A numeric range slider
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), required, pattern (a validation regex), multiline + rows, fullWidth.
• Select — name, label, items (one option per line), variant, fullWidth.
• Checkbox / Switch / Radio — label, defaultChecked, color, size, disabled. (Checkbox and Radio also take a name for form binding.)
• Slider — defaultValue, min, max, step, valueLabelDisplay, marks.
• 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