Number Input
Usage notes
Number inputs are used as numeric control form fields.
Default
Toggle markup
<form class="coral-Form coral-Form--vertical">
<label id="label1" class="coral-Form-fieldlabel">Label</label>
<coral-numberinput labelledby="label1"></coral-numberinput>
</form>
Preset step
Toggle markup
<form class="coral-Form coral-Form--vertical">
<label id="label2" class="coral-Form-fieldlabel">Label</label>
<coral-numberinput labelledby="label2" step="3" value="0"></coral-numberinput>
</form>
Decimal support
Toggle markup
<form class="coral-Form coral-Form--vertical">
<label id="label3" class="coral-Form-fieldlabel">Label</label>
<coral-numberinput labelledby="label3" step="0.5"></coral-numberinput>
</form>
Scientific notation support
Toggle markup
<form class="coral-Form coral-Form--vertical">
<label id="label4" class="coral-Form-fieldlabel">Label</label>
<coral-numberinput labelledby="label4" step="0.0000001"></coral-numberinput>
</form>
With max/min range
Toggle markup
<form class="coral-Form coral-Form--vertical">
<label id="label5" class="coral-Form-fieldlabel">Label</label>
<coral-numberinput labelledby="label5" value="1" max="5" min="0"></coral-numberinput>
</form>
Invalid
Toggle markup
<form class="coral-Form coral-Form--vertical">
<label id="label6" class="coral-Form-fieldlabel">Label</label>
<coral-numberinput labelledby="label6" invalid="" value="-1" min="0" max="5"></coral-numberinput>
</form>
Disabled
Toggle markup
<form class="coral-Form coral-Form--vertical">
<label id="label7" class="coral-Form-fieldlabel">Label</label>
<coral-numberinput labelledby="label7" disabled="" value="0"></coral-numberinput>
</form>
ReadOnly
Toggle markup
<form class="coral-Form coral-Form--vertical">
<label id="label8" class="coral-Form-fieldlabel">Label</label>
<coral-numberinput labelledby="label8" readonly="" value="0"></coral-numberinput>
</form>
Required
Toggle markup
<form class="coral-Form coral-Form--vertical">
<label id="label9" class="coral-Form-fieldlabel">Label</label>
<coral-numberinput labelledby="label9" required=""></coral-numberinput>
</form>
Form Field
Toggle markup
<form class="coral-Form coral-Form--vertical" style="max-width:300px;">
<label id="label10" class="coral-FieldLabel">Label</label>
<coral-numberinput class="coral-Form-field" labelledby="label10"></coral-numberinput>
</form>