2020-07-15 21:30:37 +00:00
|
|
|
# Input
|
|
|
|
|
|
|
|
|
|
[component-header:sl-input]
|
|
|
|
|
|
|
|
|
|
Inputs collect data from the user.
|
|
|
|
|
|
|
|
|
|
```html preview
|
|
|
|
|
<sl-input></sl-input>
|
|
|
|
|
```
|
|
|
|
|
|
2021-05-13 13:11:24 +00:00
|
|
|
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
|
2020-07-15 21:30:37 +00:00
|
|
|
|
2020-08-28 20:14:39 +00:00
|
|
|
?> Please refer to the section on [form control validation](/components/form?id=form-control-validation) to learn how to do client-side validation.
|
|
|
|
|
|
2020-07-15 21:30:37 +00:00
|
|
|
## Examples
|
|
|
|
|
|
2020-08-25 20:23:33 +00:00
|
|
|
### Placeholders
|
2020-07-15 21:30:37 +00:00
|
|
|
|
2020-08-25 20:23:33 +00:00
|
|
|
Use the `placeholder` attribute to add a placeholder.
|
2020-07-15 21:30:37 +00:00
|
|
|
|
|
|
|
|
```html preview
|
2020-08-25 20:23:33 +00:00
|
|
|
<sl-input placeholder="Type something"></sl-input>
|
2020-07-15 21:30:37 +00:00
|
|
|
```
|
|
|
|
|
|
2020-08-25 20:23:33 +00:00
|
|
|
### Clearable
|
2020-07-15 21:30:37 +00:00
|
|
|
|
2021-07-08 21:41:10 +00:00
|
|
|
Add the `clearable` attribute to add a clear button when the input has content.
|
2020-07-15 21:30:37 +00:00
|
|
|
|
|
|
|
|
```html preview
|
2020-08-25 20:23:33 +00:00
|
|
|
<sl-input placeholder="Clearable" clearable></sl-input>
|
2020-07-15 21:30:37 +00:00
|
|
|
```
|
|
|
|
|
|
2020-08-25 20:23:33 +00:00
|
|
|
### Toggle Password
|
2020-07-15 21:30:37 +00:00
|
|
|
|
2021-07-08 21:41:10 +00:00
|
|
|
Add the `toggle-password` attribute to add a toggle button that will show the password when activated.
|
2020-07-15 21:30:37 +00:00
|
|
|
|
|
|
|
|
```html preview
|
2020-08-25 20:23:33 +00:00
|
|
|
<sl-input type="password" placeholder="Password Toggle" size="small" toggle-password></sl-input>
|
2020-07-15 21:30:37 +00:00
|
|
|
<br>
|
2020-08-25 20:23:33 +00:00
|
|
|
<sl-input type="password" placeholder="Password Toggle" size="medium" toggle-password></sl-input>
|
2020-07-15 21:30:37 +00:00
|
|
|
<br>
|
2020-08-25 20:23:33 +00:00
|
|
|
<sl-input type="password" placeholder="Password Toggle" size="large" toggle-password></sl-input>
|
2020-07-15 21:30:37 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Pill
|
|
|
|
|
|
2021-07-08 21:41:10 +00:00
|
|
|
Use the `pill` attribute to give inputs rounded edges.
|
2020-07-15 21:30:37 +00:00
|
|
|
|
|
|
|
|
```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>
|
|
|
|
|
```
|
|
|
|
|
|
2020-08-25 20:23:33 +00:00
|
|
|
### 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>
|
|
|
|
|
```
|
|
|
|
|
|
2020-07-15 21:30:37 +00:00
|
|
|
### 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>
|
|
|
|
|
```
|
|
|
|
|
|
2020-08-25 20:23:33 +00:00
|
|
|
### Labels
|
2020-07-15 21:30:37 +00:00
|
|
|
|
2020-12-23 20:47:13 +00:00
|
|
|
Use the `label` attribute to give the input an accessible label. For labels that contain HTML, use the `label` slot instead.
|
2020-07-15 21:30:37 +00:00
|
|
|
|
|
|
|
|
```html preview
|
2020-12-23 20:47:13 +00:00
|
|
|
<sl-input label="What is your name?"></sl-input>
|
2020-07-15 21:30:37 +00:00
|
|
|
```
|
|
|
|
|
|
2020-08-25 20:23:33 +00:00
|
|
|
### Help Text
|
2020-07-15 21:30:37 +00:00
|
|
|
|
2020-12-23 20:47:13 +00:00
|
|
|
Add descriptive help text to an input with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
|
2020-09-24 12:58:27 +00:00
|
|
|
|
|
|
|
|
```html preview
|
2020-12-23 20:47:13 +00:00
|
|
|
<sl-input
|
|
|
|
|
label="Nickname"
|
|
|
|
|
help-text="What would you like people to call you?"
|
|
|
|
|
></sl-input>
|
2020-09-24 12:58:27 +00:00
|
|
|
```
|
|
|
|
|
|
2020-07-15 21:30:37 +00:00
|
|
|
[component-metadata:sl-input]
|
