7.0 KiB
meta | layout | ||||
---|---|---|---|---|---|
|
component |
<sl-input></sl-input>
import SlInput from '@shoelace-style/shoelace/dist/react/input';
const App = () => <SlInput />;
:::tip
This component works with standard <form>
elements. Please refer to the section on 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.
<sl-input label="What is your name?"></sl-input>
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
import SlInput from '@shoelace-style/shoelace/dist/react/input';
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.
<sl-input label="Nickname" help-text="What would you like people to call you?"></sl-input>
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
import SlInput from '@shoelace-style/shoelace/dist/react/input';
const App = () => <SlInput label="Nickname" help-text="What would you like people to call you?" />;
Placeholders
Use the placeholder
attribute to add a placeholder.
<sl-input placeholder="Type something"></sl-input>
import SlInput from '@shoelace-style/shoelace/dist/react/input';
const App = () => <SlInput placeholder="Type something" />;
Clearable
Add the clearable
attribute to add a clear button when the input has content.
<sl-input placeholder="Clearable" clearable></sl-input>
import SlInput from '@shoelace-style/shoelace/dist/react/input';
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.
<sl-input type="password" placeholder="Password Toggle" password-toggle></sl-input>
import SlInput from '@shoelace-style/shoelace/dist/react/input';
const App = () => <SlInput type="password" placeholder="Password Toggle" size="medium" password-toggle />;
Filled Inputs
Add the filled
attribute to draw a filled input.
<sl-input placeholder="Type something" filled></sl-input>
import SlInput from '@shoelace-style/shoelace/dist/react/input';
const App = () => <SlInput placeholder="Type something" filled />;
Disabled
Use the disabled
attribute to disable an input.
<sl-input placeholder="Disabled" disabled></sl-input>
import SlInput from '@shoelace-style/shoelace/dist/react/input';
const App = () => <SlInput placeholder="Disabled" disabled />;
Sizes
Use the size
attribute to change an input's 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>
import SlInput from '@shoelace-style/shoelace/dist/react/input';
const App = () => (
<>
<SlInput placeholder="Small" size="small" />
<br />
<SlInput placeholder="Medium" size="medium" />
<br />
<SlInput placeholder="Large" size="large" />
</>
);
Pill
Use the pill
attribute to give inputs rounded edges.
<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>
import SlInput from '@shoelace-style/shoelace/dist/react/input';
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.
<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>
import SlInput from '@shoelace-style/shoelace/dist/react/input';
const App = () => (
<>
<SlInput type="email" placeholder="Email" />
<br />
<SlInput type="number" placeholder="Number" />
<br />
<SlInput type="date" placeholder="Date" />
</>
);
Prefix & Suffix Icons
Use the prefix
and suffix
slots to add icons.
<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>
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
import SlInput from '@shoelace-style/shoelace/dist/react/input';
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 CSS parts to customize the way form controls are drawn. This example uses CSS grid to position the label to the left of the control, but the possible orientations are nearly endless. The same technique works for inputs, textareas, radio groups, and similar form controls.
<sl-input class="label-on-left" label="Name" help-text="Enter your name"></sl-input>
<sl-input class="label-on-left" label="Email" type="email" help-text="Enter your email"></sl-input>
<sl-textarea class="label-on-left" label="Bio" help-text="Tell us something about yourself"></sl-textarea>
<style>
.label-on-left {
--label-width: 3.75rem;
--gap-width: 1rem;
}
.label-on-left + .label-on-left {
margin-top: var(--sl-spacing-medium);
}
.label-on-left::part(form-control) {
display: grid;
grid: auto / var(--label-width) 1fr;
gap: var(--sl-spacing-3x-small) var(--gap-width);
align-items: center;
}
.label-on-left::part(form-control-label) {
text-align: right;
}
.label-on-left::part(form-control-help-text) {
grid-column-start: 2;
}
</style>