Form

The Form component provides styling for HTML forms in Metro UI. It’s a CSS-only component that offers various layout options and styling for form elements.

Dependencies

This component has no dependencies other than the core Metro UI CSS variables.

Usage

Basic Usage

<form class="form">
  <!-- Form content -->
</form>

Or use the .form class on any element:

<div class="form">
  <!-- Form content -->
</div>

Form with Groups and Actions

<form class="form">
  <div class="form-group">
    <label>Username:</label>
    <input type="text">
  </div>
  <div class="form-group">
    <label>Password:</label>
    <input type="password">
  </div>
  <div class="form-actions">
    <button type="submit">Login</button>
    <button type="button">Cancel</button>
  </div>
</form>

Inline Form

Create horizontal form layouts:

<form class="inline-form">
  <div class="form-group">
    <label>Name:</label>
    <input type="text">
  </div>
  <div class="form-group">
    <label>Email:</label>
    <input type="email">
  </div>
  <div class="form-actions">
    <button type="submit">Submit</button>
  </div>
</form>

Grid Form

Create responsive grid layouts for forms:

<form class="grid-form">
  <div class="form-group">
    <label>First Name:</label>
    <input type="text">
  </div>
  <div class="form-group">
    <label>Last Name:</label>
    <input type="text">
  </div>
  <div class="form-group">
    <label>Email:</label>
    <input type="email">
  </div>
  <div class="form-group">
    <label>Phone:</label>
    <input type="tel">
  </div>
  <div class="form-actions">
    <button type="submit">Submit</button>
  </div>
</form>

Plugin Parameters

This component is CSS-only and does not have JavaScript plugin parameters.

API Methods

This component is CSS-only and does not have JavaScript API methods.

Events

This component is CSS-only and does not have JavaScript events.

Styling with CSS Variables

Variable	Default (Light)	Dark Mode	Description
--form-column-min-width	200px	Same	Minimum width for columns in grid forms
--form-gap-size	1rem	Same	Gap size between form elements in grid forms
--border-color	Inherited from theme	Inherited from theme	Color for borders in form elements

Example of Custom Styling

:root {
  --form-column-min-width: 250px;
  --form-gap-size: 1.5rem;
  --border-color: #ccc;
}

Available CSS Classes

Base Classes

• .form - The main container class for form styling
• .form-group - Container for form elements with labels
• .form-actions - Container for form buttons and controls

Modifiers

• .inline-form - Creates a horizontal form layout
• .grid-form - Creates a responsive grid layout for forms

Notes

• Form groups are stacked vertically by default with a margin between them
• Form actions have a top border by default
• Inline forms remove the top margin from form groups and align elements horizontally
• Grid forms use CSS Grid to create responsive layouts
• The grid form’s column width and gap size can be customized using CSS variables