webawesome/docs/components/input.md

Input

[component-header:sl-input]

Inputs collect data from the user.

<sl-input type="text" placeholder="Input"></sl-input>

Examples

Labels

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

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>

Pill

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

Prefix & Suffix Icons

<sl-input type="text" 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 type="text" 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 type="text" placeholder="Large" size="large">
  <sl-icon name="tag" slot="prefix"></sl-icon>
  <sl-icon name="gear" slot="suffix"></sl-icon>
</sl-input>

Clearable

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

Toggle Password

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

Disabled

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

[component-metadata:sl-input]