Skip to content

Number Input

A sl-input-number component is an interactive element that allows the user to input some number.

This component reflects and extends the behavior of the standard input element, with number type.

html
<sl-input-number placeholder="21"/>

Modifiers

Adding those boolean attributes allows to modify the input styling.

Size defaults to medium.

Sizes
html
<!-- Size -->
<sl-input-number label="Small" placeholder="Small" small/>
<sl-input-number label="Medium" placeholder="Medium" medium/>

Attributes

Disabled

Makes the input non-interactable.

html
<sl-input-number placeholder="21" disabled/>

Min

Makes the input minimum value.

html
<sl-input-number placeholder="18+" value="18" min="18"/>

Max

Makes the input maximum value.

html
<sl-input-number placeholder="25+" value="25" min="25"/>

Step

Makes the input step when incrementing or decrementing.

html
<sl-input-number label="Rating" placeholder="10" step="0.5"/>

Events

Input

Triggered when the user updates the value.

html
<sl-input-number placeholder="21"/>

Change

Triggered when the user is done with updating the value.

html
<sl-input-number placeholder="21"/>