webawesome/docs/components/input.md

Input

<sl-input type="text" placeholder="Small" size="small"></sl-input>

<br><br>

<sl-input type="text" placeholder="Medium" size="medium"></sl-input>

<br><br>

<sl-input type="text" placeholder="Large" size="large"></sl-input>

<br><br>

<sl-input type="text" placeholder="Small" size="small">
  <sl-icon name="tag" slot="prefix"></sl-icon>
  <sl-icon name="settings" slot="suffix"></sl-icon>
</sl-input>

<br><br>

<sl-input type="text" placeholder="Medium" size="medium">
  <sl-icon name="tag" slot="prefix"></sl-icon>
  <sl-icon name="settings" slot="suffix"></sl-icon>
</sl-input>

<br><br>

<sl-input type="text" placeholder="Large" size="large">
  <sl-icon name="tag" slot="prefix"></sl-icon>
  <sl-icon name="settings" slot="suffix"></sl-icon>
</sl-input>

<br><br>

<sl-input type="text" placeholder="Clearable" size="small" clearable></sl-input>

<br><br>

<sl-input type="text" placeholder="Clearable" size="medium" clearable></sl-input>

<br><br>

<sl-input type="text" placeholder="Clearable" size="large" clearable></sl-input>

<br><br>

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

<br><br>

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

<br><br>

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

<br><br>

<sl-input type="text" placeholder="Disabled" size="small" disabled></sl-input>

<br><br>

<sl-input type="text" placeholder="Disabled" size="medium" disabled></sl-input>

<br><br>

<sl-input type="text" placeholder="Disabled" size="large" disabled></sl-input>

<br><br>

<sl-input type="number" placeholder="Number"></sl-input>

[component-metadata:sl-input]