Form Layouts

Forms are structured using a set of flexible container classes that handle spacing, alignment, and validation states. 📝

Examples

Basic Form Structure

Use the .ro-form class as the main container for your form. Inside, use .ro-form-control to wrap each label and input pair. This ensures consistent vertical spacing.

<form class="ro-form ro-u-items-stretch">
<div class="ro-form-control">
  <label class="ro-label" for="email">Email address</label>
  <label class="ro-input-group">
    <input type="email" id="email" placeholder="name@example.com" />
  </label>
</div>
<div class="ro-form-control">
  <label class="ro-label" for="password">Password</label>
  <label class="ro-input-group">
    <input type="password" id="password" placeholder="Password" />
  </label>
</div>
<button class="ro-btn ro-color-scheme-product">Submit</button>
</form>

Preview

Horizontal Layout

Add the .ro-dir-horizontal class to a .ro-form-control to align the label and input side-by-side. This is commonly used for switches or checkboxes.

<div class="ro-form-control ro-dir-horizontal">
<input type="checkbox" class="ro-switch" id="notifications" />
<label class="ro-label" for="notifications">Enable notifications</label>
</div>

Preview

Enable notifications

Validation States

To display validation errors, add the .ro-state-invalid class to the .ro-form-control container. Then, include an element with .ro-form-error-message inside the control. The error message will only be visible when the parent has the invalid state class.

<div class="ro-form-control ro-state-invalid">
<label class="ro-label" for="username">Username</label>
<label class="ro-input-group">
  <input type="text" id="username" value="inv@lid" />
</label>
<span class="ro-form-error-message">
  <i class="ro-icon ro-icon-warning-error"></i>
  Invalid username format
</span>
</div>

Preview

Username

Invalid username format

Complex Layouts

[cite_start]For multi-column layouts, you can combine .ro-form with the Grid Utilities[cite: 852]. This allows you to place multiple form controls on the same row.

<form class="ro-form">
<div class="ro-grid ro-cols-1 md:ro-cols-2 ro-u-gap-4">
  <div class="ro-form-control">
    <label class="ro-label" for="fname">First Name</label>
    <label class="ro-input-group">
      <input type="text" id="fname" placeholder="Jane" />
    </label>
  </div>
  <div class="ro-form-control">
    <label class="ro-label" for="lname">Last Name</label>
    <label class="ro-input-group">
      <input type="text" id="lname" placeholder="Doe" />
    </label>
  </div>
  <div class="ro-form-control ro-col-span-1 md:ro-col-span-2">
    <label class="ro-label" for="address">Address</label>
    <label class="ro-input-group">
      <input type="text" id="address" placeholder="123 Main St" />
    </label>
  </div>
</div>
<button class="ro-btn ro-color-scheme-product ro-u-self-end"><i class="ro-icon ro-icon-check-circle"></i>Save Profile</button>
</form>

Preview

Fieldsets and Legends

Use .ro-fieldset to group related form controls. It handles spacing and borders. You can use .ro-form-legend to style the legend text.

Radio Group

<fieldset class="ro-fieldset">
<legend class="ro-form-legend">Preferences</legend>
<div class="ro-form-control ro-dir-horizontal">
   <input type="radio" class="ro-input-radio" name="pref" id="opt1" checked />
   <label for="opt1">Option 1</label>
</div>
<div class="ro-form-control ro-dir-horizontal">
   <input type="radio" class="ro-input-radio" name="pref" id="opt2" />
   <label for="opt2">Option 2</label>
</div>
</fieldset>

Preview

Preferences

Option 1

Option 2

Mixed Controls

Fieldsets can contain any type of form control, such as a mix of text inputs and checkboxes.

<fieldset class="ro-fieldset">
<legend class="ro-form-legend">Account Settings</legend>
<div class="ro-form-control">
  <label class="ro-label" for="display-name">Display Name</label>
  <label class="ro-input-group">
    <input type="text" id="display-name" placeholder="User123" />
  </label>
</div>
<div class="ro-form-control ro-dir-horizontal">
   <input type="checkbox" class="ro-input-checkbox" id="public-profile" />
   <label for="public-profile">Make profile public</label>
</div>
<div class="ro-form-control ro-dir-horizontal">
   <input type="checkbox" class="ro-input-checkbox" id="marketing-emails" checked />
   <label for="marketing-emails">Receive marketing emails</label>
</div>
</fieldset>

Preview

Account Settings

This is a description

Display Name

Make profile public

Receive marketing emails

Properties

Class	Description
`.ro-form`	Main container for forms. Applies vertical stacking with `var(--ro-size-4)` gap.
`.ro-form-control`	Container for an individual input/label pair. Applies vertical stacking with `var(--ro-size-2)` gap.
`.ro-dir-horizontal`	Modifier for `.ro-form-control`. Aligns items horizontally (row) with `var(--ro-size-1)` gap.
`.ro-label`, `.ro-form-legend`	Applies standard font styling (weight, size) to labels and legends.
`.ro-state-invalid`	Toggles the visibility of error messages and changes input border colors to danger.
`.ro-form-error-message`	Container for error text and icons. Hidden by default unless parent is invalid.
`.ro-fieldset`	Groups multiple controls. Applies vertical stacking with `var(--ro-size-2)` gap and adds a border.