Text Inputs

Text inputs, including <input>, and <textarea>, are styled using a wrapper element with the .ro-input-group class. This approach allows for consistent styling, spacing, and easy inclusion of icons. ⌨️

Examples

Basic Input

Wrap the input in div.ro-input-group (or label.ro-input-group) and add the ro-input class on the input.

<div class="ro-input-group">
  <input class="ro-input" type="text" placeholder="Enter text..." />
</div>

Preview

Search with Icon Slots

Use div.ro-input-slot.ro-input-slot-left and div.ro-input-slot.ro-input-slot-right for leading and trailing content.

<div class="ro-input-group">
  <div class="ro-input-slot ro-input-slot-left">
    <i class="ro-icon ro-icon-search" aria-hidden="true"></i>
  </div>
  <input class="ro-input" type="search" placeholder="default input" />
  <div class="ro-input-slot ro-input-slot-right">
    <button type="button" class="ro-btn ro-variant-ghost ro-shape-icon ro-size-sm" aria-label="Voice input">
      <i class="ro-icon ro-icon-microphone-sound" aria-hidden="true"></i>
    </button>
    <button type="button" class="ro-btn ro-variant-ghost ro-shape-icon ro-size-sm" aria-label="More actions">
      <i class="ro-icon ro-icon-plus-circle" aria-hidden="true"></i>
    </button>
  </div>
</div>

Preview

Input Slots

Use the .ro-input-slot class to group multiple elements (like text and icons) within an input group. This is useful for prefixes, suffixes, or complex indicators.

<label class="ro-input-group">
  <div class="ro-input-slot">
    <span class="ro-u-text-secondary">https://</span>
  </div>
  <input type="text" placeholder="ringover.com">
</label>

<label class="ro-input-group">
  <input type="text" placeholder="0.00">
  <div class="ro-input-slot">
    <span class="ro-u-text-secondary">EUR</span>
    <ro-popover>
      <button class="ro-btn ro-size-sm ro-shape-icon ro-variant-ghost ro-popover-toggle" aria-label="Currency info"><i class="ro-icon ro-icon-info-circle" title="Currency"></i></button>
      <div class="ro-popover">
        <div class="ro-popover-body">
          This is a simple popover.
        </div>
      </div>
    </ro-popover>
  </div>
</label>

Preview

https://

EUR

This is a simple popover.

Usage with a Label

For proper accessibility and layout, the .ro-input-group should be nested within a .ro-form-control container, which also includes a .ro-label.

<div class="ro-form-control">
  <label class="ro-label" for="full-name">Full Name</label>
  <label class="ro-input-group">
      <input type="text" id="full-name" placeholder="John Doe">
  </label>
</div>

Preview

Full Name

Sizing

Use the .ro-size-lg class on the .ro-input-group to modify its size.

<label class="ro-input-group">
  <input type="text" placeholder="Default size">
</label>
<label class="ro-input-group ro-size-lg">
  <input type="text" placeholder="Large size">
</label>

Preview

Full Width

Use the .ro-full-width class to make the input group take up 100% of the available width.

<label class="ro-input-group ro-full-width">
  <input type="text" placeholder="Full width input">
</label>

Preview

Variants

Different background colors can be applied using variant classes. Use .ro-variant-grey for a light grey background or .ro-variant-opaque for a solid background that changes on focus.

<label class="ro-input-group ro-variant-grey">
  <input type="text" placeholder="Grey variant">
</label>

<label class="ro-input-group ro-variant-opaque">
  <input type="text" placeholder="Opaque variant">
</label>

Preview

Disabled

When the input element inside the group is disabled, the input group automatically adjusts its styling to reflect the disabled state.

<label class="ro-input-group">
  <input type="text" placeholder="Disabled input" disabled>
</label>

Preview

Textarea

The .ro-input-group wrapper also works seamlessly with <textarea> elements.

<label class="ro-input-group">
  <textarea placeholder="Enter a long message..."></textarea>
</label>

Preview

Invalid State

Add .ro-state-invalid on .ro-input-group or on a parent .ro-field / .ro-form-control to apply a danger border.

<div class="ro-field ro-state-invalid">
  <label class="ro-input-group">
    <input type="text" placeholder="Invalid input" aria-invalid="true" />
  </label>
</div>

Preview

---

Deprecated Variants

The following variants are no longer shipped in @ringover/styles:

• light — use .ro-variant-grey instead.

See the Migration guide.

Properties

.ro-input-group

Property	Default	Description
.ro-input-group		Flex wrapper; styles descendant input, textarea, and select.
.ro-size-lg, [data-ro-size="lg"]	md (40px height)	Large input height.
.ro-variant-grey, .ro-variant-opaque	transparent	Background variants. Aliases: .ro-color-scheme-grey, .ro-color-scheme-opaque, [data-ro-variant]. Deprecated: light (use grey).
.ro-full-width	(none)	Sets width to 100%.
.ro-input-slot	(none)	Prefix/suffix slot container. Naming conventions ro-input-slot-left / ro-input-slot-right are markup helpers only.
.ro-state-invalid	(none)	Danger border (on group or inherited from .ro-field).
.ro-input	(none)	Optional markup hook; styling targets native controls inside .ro-input-group.