# Input
[component-header:sl-input]
Inputs collect data from the user.
```html preview
```
?> This component doesn't work with standard forms. Use [``](/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
```
### Clearable
Add the `clearable` prop to add a clear button when the input has content.
```html preview
```
### Toggle Password
Add the `toggle-password` prop to add a toggle button that will show the password when activated.
```html preview
```
### Pill
Use the `pill` prop to give inputs rounded edges.
```html preview
```
### Disabled
Use the `disabled` attribute to disable an input.
```html preview
```
### Sizes
Use the `size` attribute to change an input's size.
```html preview
```
### Prefix & Suffix Icons
Use the `prefix` and `suffix` slots to add icons.
```html preview
```
### Labels
Use the `label` attribute to give the input an accessible label.
```html preview
```
### Help Text
Add descriptive help text to an input with the `help-text` slot.
```html preview
What would you like people to call you?
```
### 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.
```html preview
HomeHomeMobileWork
Please enter a phone number where we can reach you.