webawesome/docs/components/input.md

Input

[component-header:sl-input]

Inputs collect data from the user.

<sl-input></sl-input>

?> This component doesn't work with standard forms. Use <sl-form> instead.

?> Please refer to the section on form control validation to learn how to do client-side validation.

Examples

Placeholders

Use the placeholder attribute to add a placeholder.

<sl-input placeholder="Type something"></sl-input>

Clearable

Add the clearable prop to add a clear button when the input has content.

<sl-input placeholder="Clearable" clearable></sl-input>

Toggle Password

Add the toggle-password prop to add a toggle button that will show the password when activated.

<sl-input type="password" placeholder="Password Toggle" size="small" toggle-password></sl-input>
<br>
<sl-input type="password" placeholder="Password Toggle" size="medium" toggle-password></sl-input>
<br>
<sl-input type="password" placeholder="Password Toggle" size="large" toggle-password></sl-input>

Pill

Use the pill prop to give inputs rounded edges.

<sl-input placeholder="Small" size="small" pill></sl-input>
<br>
<sl-input placeholder="Medium" size="medium" pill></sl-input>
<br>
<sl-input placeholder="Large" size="large" pill></sl-input>

Disabled

Use the disabled attribute to disable an input.

<sl-input placeholder="Disabled" size="small" disabled></sl-input>
<br>
<sl-input placeholder="Disabled" size="medium" disabled></sl-input>
<br>
<sl-input placeholder="Disabled" size="large" disabled></sl-input>

Sizes

Use the size attribute to change an input's size.

<sl-input placeholder="Small" size="small"></sl-input>
<br>
<sl-input placeholder="Medium" size="medium"></sl-input>
<br>
<sl-input placeholder="Large" size="large"></sl-input>

Prefix & Suffix Icons

Use the prefix and suffix slots to add icons.

<sl-input placeholder="Small" size="small">
  <sl-icon name="tag" slot="prefix"></sl-icon>
  <sl-icon name="gear" slot="suffix"></sl-icon>
</sl-input>
<br>
<sl-input placeholder="Medium" size="medium">
  <sl-icon name="tag" slot="prefix"></sl-icon>
  <sl-icon name="gear" slot="suffix"></sl-icon>
</sl-input>
<br>
<sl-input placeholder="Large" size="large">
  <sl-icon name="tag" slot="prefix"></sl-icon>
  <sl-icon name="gear" slot="suffix"></sl-icon>
</sl-input>

Labels

Use the label attribute to give the input an accessible label.

<sl-input label="Name"></sl-input>
<br>
<sl-input type="email" label="Email" placeholder="bob@example.com"></sl-input>

Help Text

Add descriptive help text to an input with the help-text slot.

<sl-input label="Nickname">
  <div slot="help-text">What would you like people to call you?</div>
</sl-input>

Inputs with Dropdowns

Dropdowns can be used in the prefix or suffix slot to make inputs more versatile. Make sure to use the hoist prop so the dropdown breaks out of the input's overflow.

<div class="input-dropdowns">
  <sl-input type="tel" label="Phone">
    <sl-icon slot="prefix" name="telephone"></sl-icon>
    <sl-dropdown slot="suffix" placement="bottom-end" hoist>
      <sl-button slot="trigger" caret type="text" size="small">Home</sl-button>
      <sl-menu>
        <sl-menu-item checked>Home</sl-menu-item>
        <sl-menu-item>Mobile</sl-menu-item>
        <sl-menu-item>Work</sl-menu-item>
      </sl-menu>
    </sl-dropdown>
    <div slot="help-text">
      Please enter a phone number where we can reach you.
    </div>
  </sl-input>
</div>

<script>
  const container = document.querySelector('.input-dropdowns');
  const dropdown = container.querySelector('sl-dropdown');
  const trigger = dropdown.querySelector('sl-button');

  dropdown.addEventListener('sl-select', event => {
    const selectedItem = event.detail.item;
    trigger.textContent = selectedItem.textContent;
    [...dropdown.querySelectorAll('sl-menu-item')].map(item => item.checked = item === selectedItem);
  });
</script>

<style>
  .input-dropdowns sl-dropdown {
    margin-right: .25rem;
  }
</style>

[component-metadata:sl-input]