Input groups

Text fields can include elements before and after the input. This is useful for adding elements like text, icons, or buttons to the text field.

Append

Certara UI

Button

Toggle dark mode

<certara-input required id="firstName" name="firstName">
      <certara-button slot="append">Button</certara-button>
    </certara-input>

HTML

Append

Toggle dark mode

<div class="input-group">
      <input type="text" class="form-control" placeholder="…">
      <div class="input-group-append">
          <button class="btn btn--brand">Append</button>
      </div>
  </div>

Prepend

Certara UI

Label

Toggle dark mode

<certara-input required id="firstName" name="firstName">
          <label slot="prepend">Label</label>
        </certara-input>

HTML

Label

Toggle dark mode

<div class="input-group">
      <div class="input-group-prepend"><label class="input-group-text">Label</label></div>
      <input type="text" class="form-control" placeholder="…">
  </div>

Both

Certara UI

Label Button

Toggle dark mode

<certara-input required id="firstName" name="firstName">
      <label slot="prepend">Label</label>
      <certara-button slot="append">Button</certara-button>
    </certara-input>

HTML

Label

Append

Toggle dark mode

<div class="input-group">
      <div class="input-group-prepend"><label class="input-group-text">Label</label></div>
      <input type="text" class="form-control" placeholder="…">
      <div class="input-group-append">
          <button class="btn btn--brand">Append</button>
      </div>
  </div>

Design resources

View component in Figma