For situations where the <auro-form> web component cannot be used, a native HTML <form> element can be styled with the Auro Design System tokens to approximate the layout and spacing used by auro-form. Unlike auro-hyperlink, Web Core Style Sheets does not provide a prebuilt .form class. The native <form> element provides the structural container and browser-native constraint validation, but it does not provide the cross-field coordination that auro-form adds.

The native form can be laid out using the Auro design tokens published by @aurodesignsystem/design-tokens. The pattern below replicates the spacing and rhythm used by auro-form.

@import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css";
​
.form {
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-300, 1.5rem);
  padding: var(--ds-size-400, 2rem);
}
​
.form fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--ds-size-200, 1rem);
  border: 0;
  padding: 0;
  margin: 0;
}
​
.form legend {
  padding: 0;
  margin-bottom: var(--ds-size-100, 0.5rem);
}
​
.form .actions {
  display: flex;
  gap: var(--ds-size-200, 1rem);
  margin-top: var(--ds-size-200, 1rem);
}

Apply the .form class to a native <form> element and rely on the browser's built-in submit and reset behavior:

<form class="form" action="/subscribe" method="post">
  <label>
    Email
    <input type="email" name="email" required />
  </label>
  <div class="actions">
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
  </div>
</form>

Use a <fieldset> and <legend> to give grouped fields an accessible name:

<form class="form">
  <fieldset>
    <legend>Contact information</legend>
    <label>First name <input type="text" name="firstName" required /></label>
    <label>Last name <input type="text" name="lastName" required /></label>
    <label>Email <input type="email" name="email" required /></label>
  </fieldset>
  <div class="actions">
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
  </div>
</form>

While the CSS above replicates the visual layout of auro-form, the following functionality built into the auro-form web component is not available when using a plain HTML <form>:

auro-form automatically discovers and registers its named Auro form-element children (auro-input, auro-select, auro-datepicker, auro-combobox, auro-checkbox-group, auro-radio-group, auro-counter-group) on slot change and via a MutationObserver, so dynamically added or removed fields are tracked without manual wiring. A native <form> only exposes built-in form-associated elements through form.elements — custom elements and dynamically inserted controls require custom registration logic.

auro-form exposes a value getter that returns a single key-value object of every named child's current value, including array values from range datepickers and grouped controls. With a native <form>, you must either use FormData (which does not understand custom elements) or query each control individually and assemble the values yourself.

auro-form exposes a single validity getter that returns 'valid', 'invalid', or null based on the validity of every required and interacted-with child. Native forms expose form.checkValidity() and form.reportValidity(), but those only consider built-in form-associated elements and do not include custom elements like auro-input or auro-datepicker.

auro-form tracks an isInitialState flag that is true until any child has been interacted with or had its value changed. Native forms have no equivalent — you must implement change tracking yourself to know whether the form is in a pristine state.

auro-form listens for auroFormElement-validated events from every registered child and updates its aggregated validity state in response. A native <form> does not listen to or interpret these events, so per-field validation reported by Auro components is not rolled up into a single form-level validity result.

auro-form intercepts clicks on child submit buttons (<button type="submit"> or <auro-button type="submit">), forces validation on every registered child, waits for validation to settle, and only then fires a submit event with detail.value containing the full form snapshot. A native <form> submit fires before custom-element validation can complete and does not surface a structured value object.

auro-form intercepts clicks on child reset buttons, calls reset() on every registered child, reinitializes its state, and fires a reset event with detail.previousValue containing the values captured before the reset. A native <form> reset only restores default values on built-in form controls and does not call any custom reset method on web components.

auro-form automatically disables submit buttons while the form is in its initial state or invalid, and disables reset buttons while the form is in its initial state. With a native <form>, you must wire up your own change listeners to toggle the disabled attribute on action buttons.

auro-form listens for the Enter key on its registered children and triggers a coordinated submit, while skipping textarea-style fields so they can accept newlines. A native <form> submits on Enter only when the focused control is a form-associated element the browser recognizes, which excludes most custom elements.

auro-form recognizes its named Auro children and coordinates them as a single form, while still allowing native elements to live alongside them in markup. A native <form> treats Auro custom elements as opaque DOM nodes and provides no cross-field coordination between them.

auro-form consumes Auro design tokens through its component logic, so it automatically picks up brand-specific theming when token packages are swapped. A CSS-only form is tied to whichever tokens were imported at author time and will not respond to runtime theme switching the way the web component does.

Use auro-form whenever possible. Fall back to a CSS-styled native <form> only in environments where custom elements are not supported or when integrating with third-party systems that require plain HTML — and be prepared to reimplement child registration, aggregated value and validity, submit and reset coordination, and action-button state management yourself.