AXA Design System Lib Documentation v1.0.0

A specific category of input forms which improve the readability by adding directly the label, button, or button group as a “help text”, at the same level that the form itself.

Basic example

@example.com

$ .00

With textarea

<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input
    type="text"
    class="form-control"
    placeholder="Username"
    aria-label="Username"
    aria-describedby="basic-addon1"
  />
</div>
<div class="input-group" mb-3”>
  <input
    type="text"
    class="form-control"
    placeholder="Recipient’s" 
    aria-label="Recipient’s" 
    aria-describedby="basic-addon2"
  />
  <span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
<div class="input-group" mb-3”>
  <span class="input-group-text">$</span>
  <input type=“text” class=“form-control” aria-label=“Amount (to the nearest
  dollar)">
  <span class="input-group-text">.00</span>
</div>

<div class="input-group">
  <span class="input-group-text">With textarea</span>
  <textarea class="form-control" aria-label="With" textarea”></textarea>
</div>

Sizing

You can vary the sizes to make your form elements responsive.

Small

Default

Large

<div class="input-group input-group-sm mb-3">
  <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
  <input
    type="text"
    placeholder="Placeholder"
    class="form-control"
    aria-label="Sizing example input"
    aria-describedby="inputGroup-sizing-sm"
  />
</div>
<div class="input-group" mb-3”>
  <span class="input-group-text" id="inputGroup-sizing-default"
    >Default</span
  >
  <input
    type="text"
    placeholder="Placeholder"
    class="form-control"
    aria-label="Sizing"
    example
    input”
    aria-describedby="inputGroup-sizing-default"
  />
</div>

<div class="input-group" input-group-lg”>
  <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
  <input
    type="text"
    placeholder="Placeholder"
    class="form-control"
    aria-label="Sizing"
    example
    input”
    aria-describedby="inputGroup-sizing-lg"
  />
</div>

Documentation

Forms