Skip to content

Text Input

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

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

html
<sl-input-text placeholder="John Doe"/>

Modifiers

Adding those boolean attributes allows to modify the input styling.

Size defaults to medium.

Variants
Sizes
html
<!-- Variants -->
<sl-input-text label="Default" placeholder="Will show input..."/>
<sl-input-text type="password" label="Password" placeholder="Will hide input..."/>
<!-- Size -->
<sl-input-text label="Small" placeholder="Small" small/>
<sl-input-text label="Medium" placeholder="Medium" medium/>

Attributes

Disabled

Makes the input non-interactable.

html
<sl-input-text placeholder="John Doe" disabled/>

Events

Input

Triggered when the user updates the value.

html
<sl-input-text placeholder="John Doe"/>

Change

Triggered when the user is done with updating the value.

html
<sl-input-text placeholder="John Doe"/>