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
Section titled “Examples”Basic Input
Section titled “Basic Input”Wrap a standard <input> element within a <label> with the .ro-input-group class. Using a label ensures that clicking anywhere in the group focuses the input.
<label class="ro-input-group"> <input type="text" placeholder="Enter text..."></label>Input with Icons
Section titled “Input with Icons”Place an <i class="ro-icon"> element before or after the <input> within the group to add leading or trailing icons.
<label class="ro-input-group"> <i class="ro-icon ro-icon-email-envelope"></i> <input type="email" placeholder="Email"></label>
<label class="ro-input-group"> <input type="password" placeholder="Password"> <i class="ro-icon ro-icon-lock-private"></i></label>Input Slots
Section titled “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>Usage with a Label
Section titled “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>Sizing
Section titled “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>Full Width
Section titled “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>Variants
Section titled “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>Disabled
Section titled “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>Textarea
Section titled “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>Deprecated Variants
Section titled “Deprecated Variants”The following variants are no longer supported in the active stylesheets:
light
Properties
Section titled “Properties”.ro-input-group
Section titled “.ro-input-group”| Property | Default | Description |
|---|---|---|
.ro-size-* | md | Options: lg |
.ro-variant-* | (transparent) | Options: grey, opaque |
.ro-full-width | (none) | Sets width to 100% |
.ro-input-slot | (none) | Container for grouping items (e.g. prefix/suffix) within the input. |