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.

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

Modifiers

Adding those boolean attributes allows to modify the input styling.

Size defaults to medium.

Variants

Sizes

<!-- 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.

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

Options

The component can have a list of options.

<sl-input-text
  label="Gender"
  placeholder="Pick a gender..."
  :options="[{ value: 'Male' }, { value: 'Female' }]"
/>

Events

Input

Triggered when the user updates the value.

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

Change

Triggered when the user is done with updating the value.

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