This is our custom input spinner, based on react-bootstrap
An input number spinner based on React-Bootstrap for React.
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
<template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template>
<template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
Add the relative form input group sizing props size = "sm" | "lg"
for additional sizes
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
<template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template>
<template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>
</template>
<div class="row">
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control"placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4 mb-3">
<input type="text" class="form-control is-valid" placeholder="Disabled" disabled>
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Input Box">
</div>
<div class="col-md-4 mb-md-0 mb-3">
<input type="text" class="form-control is-invalid" placeholder="Readonly" value="Readonly" readonly>
</div>
<div class="col-md-4">
<input type="text" class="form-control is-invalid" placeholder="Disabled" disabled>
</div>
</div>