# Input

[component-header:sl-input]

Inputs collect data from the user.

```html preview
<sl-input></sl-input>
```

?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.

?> Please refer to the section on [form control validation](/components/form?id=form-control-validation) to learn how to do client-side validation.

## Examples

### Placeholders

Use the `placeholder` attribute to add a placeholder.

```html preview
<sl-input placeholder="Type something"></sl-input>
```

### Clearable

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

```html preview
<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.

```html preview
<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.

```html preview
<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>
```

### Input Types

The `type` attribute controls the type of input the browser renders.

```html preview
<sl-input type="email" Placeholder="Email"></sl-input>
<br>
<sl-input type="number" Placeholder="Number"></sl-input>
<br>
<sl-input type="date" Placeholder="Date" clearable></sl-input>
```

### Disabled

Use the `disabled` attribute to disable an input.

```html preview
<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.

```html preview
<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.

```html preview
<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. For labels that contain HTML, use the `label` slot instead.

```html preview
<sl-input label="What is your name?"></sl-input>
```

### Help Text

Add descriptive help text to an input with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.

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

### Error Text

Add descriptive error text to an input with the `error-text`-attribute. For error texts that contain HTML, use the `error-text`-slot instead. When an error text is supplied the help text will be hidden.

```html preview
<div id="error-example">
  <sl-input
    label="Enter text"
    help-text="When error is switch off, this help text is shown."
    error-text="The entered value is invalid"
  ></sl-input>
  <sl-switch class="mt-4" checked>Error enabled</sl-switch>
</div>

<script>
  let example = document.getElementById('error-example');
  let input = example.querySelector('sl-input');
  let switchEl = example.querySelector('sl-switch');

  switchEl.addEventListener('checkedChange', evt => {
    console.log(evt);
    const checked = evt.detail;
    input.errorText = checked ? 'The entered value is still invalid' : null;
  });
</script>
```

### Theme

Use `sl-theme` for theming the input, fx. dark mode as shown here.

```html preview
<div style="background:black; padding: var(--sl-spacing-medium)" >
<sl-theme name="dark">
<sl-input placeholder="Small text" size="small"></sl-input>
<br>
<sl-input placeholder="Medium date" size="medium" type="date"></sl-input>
<br>
<sl-input placeholder="Large disabled" size="large" disabled></sl-input>

</sl-theme>
</div>
```

[component-metadata:sl-input]