causeway-standard-theme/causeway/docs/components/form-fields/spinbox-input.html

<div>
  <a id="spinbox"></a>
  <header class="content-header">
    <h1 class="title">
      Spin Box
    </h1>
  </header>
  <p>
    A Spin Box is used to adjust or change value in the adjoining text box by either clicking on the up or down arrow.
  </p>
  <p>You can use different data attributes on <code>&lt;input type=&quot;text&quot; class=&quot;form-control&quot;&gt;</code>to set some default behaviour to the Spin Box</p>
  <p><code>data-spin-min="-10"</code> to set minimum allowed value. Default is 0</p>
  <p><code>data-spin-max="10"</code> to set maximum allowed value. Default is 100</p>
  <p><code>data-spin-steps="2"</code> to set increment/ decrement steps. Default is 1</p>
  <p><code>data-spin-value="8"</code> to set initial value.</p>
  <p><code>data-spin-decimals="2"</code> to set allowed decimal value. Default is 0</p>
  <p>Example: </p>
  <h3 class="title">Form Horizontal</h3>
  <form class="form-horizontal">
    <div class="form-row">
      <div class="form-group spin-box">
        <label for="number1" class="control-label">Number: </label>
        <div class="control-input">
          <input type="text" id="number1" class="form-control" data-spin-min="-10" data-spin-max="10" data-spin-steps="2">
        </div>
      </div>
    </div>
  </form>
  <br/>
  <pre><code>
  &lt;form class=&quot;form-horizontal&quot;&gt;
    &lt;div class=&quot;form-row&quot;&gt;
      &lt;div class=&quot;form-group spin-box&quot;&gt;
        &lt;label for=&quot;number1&quot; class=&quot;control-label&quot;&gt;Number: &lt;/label&gt;
        &lt;div class=&quot;control-input&quot;&gt;
          &lt;input type=&quot;text&quot; id=&quot;number1&quot; class=&quot;form-control&quot; data-spin-min=&quot;-10&quot; data-spin-max=&quot;10&quot; data-spin-steps=&quot;2&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <br/>
  <h3 class="title">Form Inline</h3>
  <form class="form-inline">
    <div class="form-row">
      <div class="form-group spin-box">
        <label for="number2" class="control-label">Number: </label>
        <div class="control-input">
          <input type="text" id="number2" class="form-control">
        </div>
      </div>
    </div>
  </form>
  <br/>
  <pre><code>
  &lt;form class=&quot;form-inline&quot;&gt;
    &lt;div class=&quot;form-row&quot;&gt;
      &lt;div class=&quot;form-group spin-box&quot;&gt;
        &lt;label for=&quot;number2&quot; class=&quot;control-label&quot;&gt;Number: &lt;/label&gt;
        &lt;div class=&quot;control-input&quot;&gt;
          &lt;input type=&quot;text&quot; id=&quot;number2&quot; class=&quot;form-control&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <br/>
  <h3 class="title">Disabled</h3>
  <form class="form-horizontal">
    <div class="form-row">
      <div class="form-group spin-box disabled">
        <label for="number3" class="control-label">Number: </label>
        <div class="control-input">
          <input type="text" id="number3" class="form-control" disabled="disabled">
        </div>
      </div>
    </div>
  </form>
  <br/>
  <pre><code>
  &lt;form class=&quot;form-horizontal&quot;&gt;
    &lt;div class=&quot;form-row&quot;&gt;
      &lt;div class=&quot;form-group spin-box disabled&quot;&gt;
        &lt;label for=&quot;number3&quot; class=&quot;control-label&quot;&gt;Number: &lt;/label&gt;
        &lt;div class=&quot;control-input&quot;&gt;
          &lt;input type=&quot;text&quot; id=&quot;number3&quot; class=&quot;form-control&quot; disabled=&quot;disabled&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <br/>
  <h3 class="title">Invalid</h3>
  <form class="form-horizontal">
    <div class="form-row">
      <div class="form-group spin-box invalid">
        <label for="number4" class="control-label">Number: </label>
        <div class="control-input">
          <input type="text" id="number4" class="form-control">
        </div>
      </div>
    </div>
  </form>
  <pre><code>
  &lt;form class=&quot;form-horizontal&quot;&gt;
    &lt;div class=&quot;form-row&quot;&gt;
      &lt;div class=&quot;form-group spin-box invalid&quot;&gt;
        &lt;label for=&quot;number4&quot; class=&quot;control-label&quot;&gt;Number: &lt;/label&gt;
        &lt;div class=&quot;control-input&quot;&gt;
          &lt;input type=&quot;text&quot; id=&quot;number4&quot; class=&quot;form-control&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
</div>