mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
8121faa1d4
* keep header styles with repositioned description text * `animated-image` move description to component * code style * `avatar` add summary from docs * `badge` add summary from docs * `breadcrumb` add summary from docs * `button` add summary from docs * lead sentence is now part of the header * `button-group` add summary from docs * `card` add summary from docs * `checkbox` add summary from docs * `color-picker` add summary from docs * `details` add summary from docs * `dialog` add summary from docs * `divider` add summary from docs * `drawer` add summary from docs * `dropdown` add summary from docs * `format-bytes` add summary from docs * `format-date` add summary from docs * `format-number` add summary from docs * `icon` add summary from docs * `icon-button` add summary from docs * `image-comparer` add summary from docs * `include` add summary from docs * `input` add summary from docs * `menu` add summary from docs * `menu-item` add summary from docs * `menu-label` add summary from docs * `popup` add summary from docs * `progressbar` add summary from docs * `progress-ring` add summary from docs * `radio` add summary from docs * `radio-button` add summary from docs * `range` add summary from docs * `rating` add summary from docs * `relative-time` add summary from docs * `select` add summary from docs * `skeleton` add summary from docs * `spinner` add summary from docs * `split-panel` add summary from docs * `switch` add summary from docs * `tab-group` add summary from docs * `tag` add summary from docs * `textarea` add summary from docs * `tooltip` add summary from docs * `visually-hidden` add summary from docs * `animation` add summary from docs * `breadcrumb-item` add summary from docs * `mutation-observer` add summary from docs * `radio-group` add summary from docs * `resize-observer` add summary from docs * `tab` add summary from docs * `tab-panel` add summary from docs * `tree` add summary from docs * `tree-item` add summary from docs * remove `title` for further usage of `Sl` classnames in docs * revert: use markdown parser for component summary
291 lines
6.9 KiB
Markdown
291 lines
6.9 KiB
Markdown
# Input
|
|
|
|
[component-header:sl-input]
|
|
|
|
```html preview
|
|
<sl-input></sl-input>
|
|
```
|
|
|
|
```jsx react
|
|
import { SlInput } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
const App = () => <SlInput />;
|
|
```
|
|
|
|
?> This component works with standard `<form>` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.
|
|
|
|
## Examples
|
|
|
|
### 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>
|
|
```
|
|
|
|
```jsx react
|
|
import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
const App = () => <SlInput label="What is your name?" />;
|
|
```
|
|
|
|
### 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>
|
|
```
|
|
|
|
```jsx react
|
|
import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
const App = () => <SlInput label="Nickname" help-text="What would you like people to call you?" />;
|
|
```
|
|
|
|
### Placeholders
|
|
|
|
Use the `placeholder` attribute to add a placeholder.
|
|
|
|
```html preview
|
|
<sl-input placeholder="Type something"></sl-input>
|
|
```
|
|
|
|
```jsx react
|
|
import { SlInput } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
const App = () => <SlInput placeholder="Type something" />;
|
|
```
|
|
|
|
### Clearable
|
|
|
|
Add the `clearable` attribute to add a clear button when the input has content.
|
|
|
|
```html preview
|
|
<sl-input placeholder="Clearable" clearable></sl-input>
|
|
```
|
|
|
|
```jsx react
|
|
import { SlInput } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
const App = () => <SlInput placeholder="Clearable" clearable />;
|
|
```
|
|
|
|
### Toggle Password
|
|
|
|
Add the `password-toggle` attribute to add a toggle button that will show the password when activated.
|
|
|
|
```html preview
|
|
<sl-input type="password" placeholder="Password Toggle" size="small" password-toggle></sl-input>
|
|
<br />
|
|
<sl-input type="password" placeholder="Password Toggle" size="medium" password-toggle></sl-input>
|
|
<br />
|
|
<sl-input type="password" placeholder="Password Toggle" size="large" password-toggle></sl-input>
|
|
```
|
|
|
|
```jsx react
|
|
import { SlInput } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
const App = () => (
|
|
<>
|
|
<SlInput type="password" placeholder="Password Toggle" size="small" password-toggle />
|
|
<br />
|
|
<SlInput type="password" placeholder="Password Toggle" size="medium" password-toggle />
|
|
<br />
|
|
<SlInput type="password" placeholder="Password Toggle" size="large" password-toggle />
|
|
</>
|
|
);
|
|
```
|
|
|
|
### Filled Inputs
|
|
|
|
Add the `filled` attribute to draw a filled input.
|
|
|
|
```html preview
|
|
<sl-input placeholder="Type something" filled></sl-input>
|
|
```
|
|
|
|
```jsx react
|
|
import { SlInput } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
const App = () => <SlInput placeholder="Type something" filled />;
|
|
```
|
|
|
|
### Pill
|
|
|
|
Use the `pill` attribute 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>
|
|
```
|
|
|
|
```jsx react
|
|
import { SlInput } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
const App = () => (
|
|
<>
|
|
<SlInput placeholder="Small" size="small" pill />
|
|
<br />
|
|
<SlInput placeholder="Medium" size="medium" pill />
|
|
<br />
|
|
<SlInput placeholder="Large" size="large" pill />
|
|
</>
|
|
);
|
|
```
|
|
|
|
### 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"></sl-input>
|
|
```
|
|
|
|
```jsx react
|
|
import { SlInput } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
const App = () => (
|
|
<>
|
|
<SlInput type="email" placeholder="Email" />
|
|
<br />
|
|
<SlInput type="number" placeholder="Number" />
|
|
<br />
|
|
<SlInput type="date" placeholder="Date" />
|
|
</>
|
|
);
|
|
```
|
|
|
|
### 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>
|
|
```
|
|
|
|
```jsx react
|
|
import { SlInput } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
const App = () => (
|
|
<>
|
|
<SlInput placeholder="Disabled" size="small" disabled />
|
|
<br />
|
|
<SlInput placeholder="Disabled" size="medium" disabled />
|
|
<br />
|
|
<SlInput placeholder="Disabled" size="large" disabled />
|
|
</>
|
|
);
|
|
```
|
|
|
|
### 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>
|
|
```
|
|
|
|
```jsx react
|
|
import { SlInput } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
const App = () => (
|
|
<>
|
|
<SlInput placeholder="Small" size="small" />
|
|
<br />
|
|
<SlInput placeholder="Medium" size="medium" />
|
|
<br />
|
|
<SlInput placeholder="Large" size="large" />
|
|
</>
|
|
);
|
|
```
|
|
|
|
### Prefix & Suffix Icons
|
|
|
|
Use the `prefix` and `suffix` slots to add icons.
|
|
|
|
```html preview
|
|
<sl-input placeholder="Small" size="small">
|
|
<sl-icon name="house" slot="prefix"></sl-icon>
|
|
<sl-icon name="chat" slot="suffix"></sl-icon>
|
|
</sl-input>
|
|
<br />
|
|
<sl-input placeholder="Medium" size="medium">
|
|
<sl-icon name="house" slot="prefix"></sl-icon>
|
|
<sl-icon name="chat" slot="suffix"></sl-icon>
|
|
</sl-input>
|
|
<br />
|
|
<sl-input placeholder="Large" size="large">
|
|
<sl-icon name="house" slot="prefix"></sl-icon>
|
|
<sl-icon name="chat" slot="suffix"></sl-icon>
|
|
</sl-input>
|
|
```
|
|
|
|
```jsx react
|
|
import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
const App = () => (
|
|
<>
|
|
<SlInput placeholder="Small" size="small">
|
|
<SlIcon name="house" slot="prefix"></SlIcon>
|
|
<SlIcon name="chat" slot="suffix"></SlIcon>
|
|
</SlInput>
|
|
<br />
|
|
<SlInput placeholder="Medium" size="medium">
|
|
<SlIcon name="house" slot="prefix"></SlIcon>
|
|
<SlIcon name="chat" slot="suffix"></SlIcon>
|
|
</SlInput>
|
|
<br />
|
|
<SlInput placeholder="Large" size="large">
|
|
<SlIcon name="house" slot="prefix"></SlIcon>
|
|
<SlIcon name="chat" slot="suffix"></SlIcon>
|
|
</SlInput>
|
|
</>
|
|
);
|
|
```
|
|
|
|
### Customizing Label Position
|
|
|
|
Use parts to customize the label's position.
|
|
|
|
```html preview
|
|
<sl-input class="label-on-left" label="Name"></sl-input><br />
|
|
<sl-input class="label-on-left" label="Email" type="email"></sl-input>
|
|
|
|
<style>
|
|
.label-on-left::part(form-control) {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.label-on-left::part(form-control-label) {
|
|
flex: 0 0 auto;
|
|
width: 60px;
|
|
text-align: right;
|
|
}
|
|
|
|
.label-on-left::part(form-control-input) {
|
|
flex: 1 1 auto;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
[component-metadata:sl-input]
|