Input
Examples
Basic Input with Label
Help Text
Label with Tooltip
Label with Context Note
Clearable
Toggle Password
Disabled
Sizes
Pill
Input Types
Prefix & Suffix Icons
Customizing Label Position
Usage
Labels
Help Text
Placeholder Text
Help Text, Label Tooltip, or Context Note?
Testing
With Cypress
Component Props
Slots
Events
Methods
CSS Parts
Dependencies

Since Shoelace 2.0

Code stable

Pattern stable

Figma ready

Input

sl-input

Inputs collect data from the user.

Examples

Basic Input with Label

Use the label attribute to give the input an accessible label.

<sl-input label="Name"></sl-input>

sl-input label="Name"

= ts_form_for ... do |f|
  = f.input :name,
    input_html: {
      label: "Name"
    }

import SlInput from '@teamshares/shoelace/dist/react/input';

const App = () => <SlInput label="Name" />;

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.

Help Text

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

List full names, separated by a semicolon

<sl-input label="Previous legal names" help-text="List full names, separated by a semicolon"></sl-input>
<br />
<sl-input label="Previous legal names">
  <div slot="help-text">List <strong>full</strong> names, separated by a <strong>semicolon</strong></div>
</sl-input>

sl-input[
  label="Previous legal names"
  help-text="List full names, separated by a semicolon"
]
br
sl-input label="Previous legal names"
  div slot="help-text"
    | List
    strong full
    | names, separated by a
    strong semicolon

/*
  — NOTE: Slots are not supported with ts_form_for —
*/
= ts_form_for ... do |f|
  = f.input :name,
    input_html: {
      label: "Previous legal  names",
      "help-text": "List full names, separated by a semicolon",
    }

import SlIcon from '@teamshares/shoelace/dist/react/icon';
import SlInput from '@teamshares/shoelace/dist/react/input';

const App = () => <SlInput label="Nickname" help-text="What would you like people to call you?" />;

Use the label-tooltip attribute to add text that appears in a tooltip triggered by an info icon next to the label.

Usage: Use a label tooltip to provide helpful but non-essential instructions or examples to guide people when filling in the input. Use help text to communicate instructions or requirements for filling in the input without errors.

<sl-input label="Previous legal names" label-tooltip="Names previously used on official government documents, such as passport, driver license, or ID card" help-text="List full names, separated by a semicolon"></sl-input>

sl-input[
  label="Previous legal names"
  label-tooltip="Names previously used on official government documents, such as passport, driver license, or ID card"
  help-text="List full names, separated by a semicolon"
]

= ts_form_for ... do |f|
  = f.input :name,
    input_html: {
      label: "Previous legal names",
      "label-tooltip": "Names previously used on official government documents, such as passport, driver license, or ID card",
      "help-text": "List full names, separated by a semicolon",
    }

import SlIcon from '@teamshares/shoelace/dist/react/icon';
import SlInput from '@teamshares/shoelace/dist/react/input';

const App = () => <SlInput label="What is your name?" />;

Label with Context Note

Use the context-note attribute to add text that provides additional context or reference. For text that contains HTML, use the context-note slot. Note: On small screens the context note will wrap below the label if there isn’t enough room next to the label.

Usage: Use a context note to provide secondary contextual data, especially dynamic data, that would help people when filling in the input. Use help text to communicate instructions or requirements for filling in the input without errors.

$10,000.29 available

<sl-input type="currency" label="Amount" context-note="$10,000.29 available" help-text="You can transfer up to $2,500 per day"></sl-input>
<br />
<sl-input type="currency" label="Amount" help-text="You can transfer up to $2,500 per day">
  <div slot="context-note"><strong>$10,000.29</strong> available</div>
</sl-input>

sl-input[
  type="currency"
  label="Amount"
  context-note="$10,000.29 available"
  help-text="You can transfer up to $2,500 per day"
]
br
sl-input[
  type="currency"
  label="Amount"
  help-text="You can transfer up to $2,500 per day"
]
  div slot="context-note"
    strong $10,000.29
    | available

/*
  — NOTE: Slots are not supported with ts_form_for —
*/
= ts_form_for ... do |f|
  = f.input :currency,
    input_html: {
      type: "currency",
      label: "Amount",
      "context-note": "$10,000.29 available",
      "help-text": "You can transfer up to $2,500 per day",
    }

import SlIcon from '@teamshares/shoelace/dist/react/icon';
import SlInput from '@teamshares/shoelace/dist/react/input';

const App = () => <SlInput label="What is your name?" />;

Clearable

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

<sl-input label="Clearable input" value="I can be cleared!" clearable></sl-input>

sl-input[
  label="Clearable input"
  value="I can be cleared!"
  clearable=true
]

= ts_form_for ... do |f|
  = f.input :clearable_input,
    input_html: {
      label: "Clearable input",
      value: "I can be cleared!",
      clearable: true,
    }

import SlInput from '@teamshares/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" label="Password" password-toggle></sl-input>

sl-input[
  type="password"
  label="Password"
  password-toggle=true
]

= ts_form_for ... do |f|
  = f.input :password_toggle,
    input_html: {
      label: "Password",
      type: "password",
      "password-toggle": true,
    }

import SlInput from '@teamshares/shoelace/dist/react/input';

const App = () => <SlInput type="password" placeholder="Password Toggle" size="medium" password-toggle />;

Disabled

Use the disabled attribute to disable an input.

<sl-input label="Disabled input" disabled></sl-input>

sl-input[
  label="Disabled input"
  disabled=true
]

= ts_form_for ... do |f|
  = f.input :disabled_input,
    input_html: {
      label: "Disabled input",
      disabled: true,
    }

import SlInput from '@teamshares/shoelace/dist/react/input';

const App = () => <SlInput placeholder="Disabled" disabled />;

Sizes

Use the size attribute to change an input’s size. Size medium is the input’s default.

Size small is currently not part of the Teamshares Design System, and there is no Figma component for this option. Please check with the design team before using this option.

<sl-input label="Medium input"></sl-input>
<br />
<sl-input label="Large input" size="large"></sl-input>

sl-input label="Medium input"
br
sl-input[
  label="Large input"
  size="large"
]

= ts_form_for ... do |f|
  = f.input :medium_input,
    input_html: {
      label: "Medium input"
    }
  = f.input :large_input,
    input_html: {
      label: "Large input",
      size: "large",
    }

import SlInput from '@teamshares/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.

Note: Pill inputs are not a standard input pattern in our Design System, and there is no Figma component for this option. Please check with the design team before using this option.

<sl-input label="Medium pill" pill></sl-input>
<br />
<sl-input label="Large pill" size="large" pill></sl-input>

sl-input[
  label="Medium pill"
  pill=true
]
br
sl-input[
  label="Large pill"
  size="large"
  pill=true
]

= ts_form_for ... do |f|
  = f.input :medium_pill,
    input_html: {
      label: "Medium pill",
      pill: true,
    }
  = f.input :large_pill,
    input_html: {
      label: "Large pill",
      size: "large"
      pill: true,
    }

import SlInput from '@teamshares/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. As shown in the examples below, some input types have default prefix and suffix elements. Not all available types are shown below. See the Properties table for the full list of options.

Has $ prefix and USD suffix by default and native input type set to number. The currency input does NOT have input masking at this time.

Has no icon by default

Use the optional-icon attribute to display the default optional icon for email inputs

Has no icon by default

Use the optional-icon attribute to display the default optional icon for phone number inputs

Use the no-spin-buttons attribute to hide the browser’s default increment/decrement buttons for number inputs

Has a search icon by default. Use the clearable attribute to make the input clearable

<sl-input type="currency" label="Input type: Currency"><div slot="help-text">Has <code>$</code> prefix and <code>USD</code> suffix by default and native input type set to <code>number</code>. The currency input does <strong>NOT</strong> have input masking at this time.</div></sl-input>
<br />
<sl-input type="date" label="Input type: Date" placeholder="Date" help-text="Calendar icon opens the browser default date picker"></sl-input>
<br />
<sl-input type="email" label="Input type: Email">
  <div slot="help-text">Has no icon by default</div>
</sl-input>
<br />
<sl-input type="email" label="Input type: Email, with icon" optional-icon>
  <div slot="help-text">Use the <code>optional-icon</code> attribute to display the default optional icon for email inputs </div>
</sl-input>
<br />
<sl-input type="tel" label="Input type: Tel">
  <div slot="help-text">Has no icon by default</div>
</sl-input>
<br />
<sl-input type="tel" label="Input type: Tel, with icon" optional-icon>
  <div slot="help-text">Use the <code>optional-icon</code> attribute to display the default optional icon for phone number inputs </div>
</sl-input>
<br />
<sl-input type="number" label="Input type: Number"></sl-input>
<br />
<sl-input type="number" label="Input type: Number, no spin buttons" no-spin-buttons>
    <div slot="help-text">Use the <code>no-spin-buttons</code> attribute to hide the browser's default increment/decrement buttons for number inputs</div>
</sl-input>
<br />
<sl-input type="search" label="Input type: Search" clearable><div slot="help-text">Has a search icon by default. Use the <code>clearable</code> attribute to make the input clearable</div></sl-input>
<br />

sl-input[
  type="currency"
  label="Input type: Currency"
]
  div[slot="help-text"]
    | Has
    code
      | $
    |  prefix and
    code
      | USD
    |  suffix by default and native input type set to
    code
      | number
    | . The currency input does
    strong
      | NOT
    |  have input masking at this time
br
sl-input[
  type="date"
  label="Input type: Date"
  placeholder="Date"
  help-text="Calendar icon opens the browser default date picker"
]
br
sl-input[
  type="email"
  label="Input type: Email"
]
  div[slot="help-text"]
    | Has no icon by default
br
sl-input[
  type="email"
  label="Input type: Email, with icon"
  optional-icon=true
]
  div[slot="help-text"]
    | Use the
    code
      | optional-icon
    |  attribute to display the default optional icon for email inputs
br
sl-input[
  type="tel"
  label="Input type: Tel"
]
  div[slot="help-text"]
    | Has no icon by default
br
sl-input[
  type="tel"
  label="Input type: Tel, with icon"
  optional-icon=true
]
  div[slot="help-text"]
    | Use the
    code
      | optional-icon
    |  attribute to display the default optional icon for phone number inputs
br
sl-input[
  type="number"
  label="Input type: Number"
]
br
sl-input[
  type="number"
  label="Input type: Number, no spin buttons"
  no-spin-buttons=true
]
  div[slot="help-text"]
    | Use the
    code
      | no-spin-buttons
    |  attribute to hide the browser's default increment/decrement buttons for number inputs
br
sl-input[
  type="search"
  label="Input type: Search"
  clearable=true
]
  div[slot="help-text"]
    | Has a search icon by default. Use the
    code
      | clearable
    |  attribute to make the input clearable
br

/*
  — NOTE: Slots are not supported with ts_form_for —
  — Attributes can be passed to `input_html`
*/

import SlInput from '@teamshares/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

Several input types have specific prefix and suffix elements or icons that are displayed by default. You can also use the prefix and suffix slots to add icons or text elements for other use cases.

Follow these general guidelines when adding prefix and suffix icons to the input:

Use the sl-icon component
Use library="fa" (our default Font Awesome icon set)
Use the Regular icon style, which means you don’t need to add a fas- or other prefix to the icon name
- See icons sets for more about Font Awesome icon styles
In general don’t resize icons or change their color from the default already set by the sl-input component

Note: If you find your use case requires a different size or color from the default, bring it up to the Design Team so that we can consider whether the pattern needs to be updated.

Note: ts_form_for doesn’t support slots. Prefix and suffix icons cannot be added when rendering sl-input with ts_form_for. However, the optional-icon attribute can be set to true to display default icons for input types currency, email, tel, and search.

<sl-input label="Prefix icon example: DO">
  <sl-icon name="rocket-launch" library="fa" slot="prefix"></sl-icon>
</sl-input>
<br />
<sl-input label="Prefix icon example: DON'T">
  <sl-icon name="fad-rocket-launch" library="fa" style="font-size: 1.25rem; color:mediumaquamarine;" slot="prefix"></sl-icon>
</sl-input>
<br />
<sl-input label="Prefix icon example: POSSIBLE EXCEPTION" help-text="An icon that is hard to read at the default size" value="Input text, default alignment">
  <sl-icon name="user-magnifying-glass" library="fa" slot="prefix"></sl-icon>
</sl-input>
<br />
<sl-input label="Prefix icon example: RESIZED" help-text="Same icon as above, resized. Note that a larger prefix or suffix icon will push the input text out of alignment." value="Input text, shifted 4px right due to icon size">
  <sl-icon name="user-magnifying-glass" library="fa" style="font-size: 1.25rem;" slot="prefix"></sl-icon>
</sl-input>

sl-input label="Prefix icon example: DO"
  sl-icon[
    name="rocket-launch"
    library="fa"
    slot="prefix"
  ]
br
sl-input label="Prefix icon example: DON'T"
  sl-icon[
    name="fad-rocket-launch"
    library="fa"
    style="font-size: 1.25rem; color:mediumaquamarine;"
    slot="prefix"
  ]
br
sl-input[
  label="Prefix icon example: POSSIBLE EXCEPTION"
  help-text="An icon that is hard to read at the default size."
  value="Input text, default alignment"
]
  sl-icon[
    name="user-magnifying-glass"
    library="fa"
    slot="prefix"
  ]
br
sl-input[
  label="Prefix icon example: RESIZED"
  help-text="Same icon as above, resized. Note that a larger prefix or suffix icon will push the input text out of alignment."
  value="Input text, shifted 4px right due to icon size"
]
  sl-icon[
    name="user-magnifying-glass"
    library="fa"
    style="font-size: 1.25rem;"
    slot="prefix"
  ]

/*
  NOTE: `ts_form_for` doesn't support slots. Prefix and suffix icons
  cannot be added when rendering `sl-input` with `ts_form_for`. However,
  the `optional-icon` attribute can be set to `true` to display default icons
  for input types `currency`, `email`, `tel`, and `search`.
*/

import SlIcon from '@teamshares/shoelace/dist/react/icon';
import SlInput from '@teamshares/shoelace/dist/react/input';

const App = () => (
  <>
    <SlInput placeholder="Small" size="small">
      <SlIcon name="home" slot="prefix"></SlIcon>
      <SlIcon name="chat-bubble-bottom-center-text" slot="suffix"></SlIcon>
    </SlInput>
    <br />
    <SlInput placeholder="Medium" size="medium">
      <SlIcon name="home" slot="prefix"></SlIcon>
      <SlIcon name="chat-bubble-bottom-center-text" slot="suffix"></SlIcon>
    </SlInput>
    <br />
    <SlInput placeholder="Large" size="large">
      <SlIcon name="home" slot="prefix"></SlIcon>
      <SlIcon name="chat-bubble-bottom-center-text" 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.

Note: Alternate label positions are not a pattern in our Design System, and there is no Figma component for this option. Please check with the design team before using this option.

<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>

sl-input.label-on-left[
  label="Name"
  help-text="Enter your name"
]
sl-input.label-on-left[
  label="Email"
  type="email"
  help-text="Enter your email"
]
sl-textarea.label-on-left[
  label="Bio"
  help-text="Tell us something about yourself"
]

css:
  .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;
  }

= ts_form_for ... do |f|
  = f.input :name,
    input_html: {
      label: "Name",
      "help-text": "Enter your name",
      class: "label-on-left",
    }
  = f.input :name,
    input_html: {
      label: "Email",
      type: "email",
      "help-text": "Enter your email",
      class: "label-on-left",
    }
  = f.input :name,
    as: :text,
    input_html: {
      label: "Bio",
      "help-text": "Tell us something about yourself",
      class: "label-on-left",
    }

css:
  .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;
  }

Usage

Labels

Always have a label
Use sentence case for labels
Don’t end labels with punctuation unless asking a question
Keep labels short and easy to scan
Aim for consistency throughout a single form

Do use a question format for labels when appropriate
Do use sentence case
Do use punctuation if you are asking a question

Don’t

Don’t mix label styles in a single form (e.g. a phrase for one input, followed by a question)
Don’t use title case
Don’t end with punctuation unless the label is a complete sentence

Help Text

Keep help text concise and useful – make every word count!
Use a period only if help text includes more than one complete sentence

Do use help text to provide guidance on what to input or how to input

Don’t

Don’t use help text to just restate the label. Just skip the help text if it’s not needed!

Placeholder Text

Don’t use placeholder text, for the following reasons:
- Placeholder text is easy to mistake for an input that’s already filled in
- Placeholder text disappears as soon as people start entering text into the input and can create a frustrating experience
Instead of placeholder text, use:
- A label to explain what the input is for
- Help text to give people instructions or requirements for completing the input

Do use a label and help text to guide people

Don’t

Don’t use placeholder text

Use Help Text to communicate instructions or requirements for filling in the input without errors
Use the Label Tooltip to provide helpful but non-essential instructions or examples to guide people when filling in the input. People might choose not to view the tooltip content, so don’t put any essential information there.
Use the Context Note to provide secondary contextual data, especially dynamic data, that would help people when filling in the input
Help text is generally the best way to add hints or instructions to help people fill in the input for most use cases
If you think you need to use the Label Tooltip or Context Note, first consider whether the same information would work as help text if it were shorter or presented differently

Testing

With Cypress

Adding data-test-id to a component

To test sl-input, add the data-test-id attribute directly to the component:

  sl-input[
    label="Name"
    data-test-id="input-test"
  ]

To test sl-input implemented with ts_form_for, add data-test-id to input_html:

  = ts_form_for ... do |f|
    = f.input :input_name, 
      input_html: { 
        label: "Name",
        data: { 
          test_id: "input-test"
        } 
      }

Cypress commands for sl-input

To type in the input:

  cy.slInputType(`[data-test-id="input-test"]`, "Your text here");

To check the input’s value (note the matcher "have.value"):

  cy.get(`[data-test-id="input-test"]`).should("have.value", "Your text here");

To focus on the input:

  cy.slFocus(`[data-test-id="input-test"]`);

To clear the input:

  cy.slClear(`[data-test-id="input-test"]`);

Component Props

Note: The following appear as options in the Properties table but are currently not part of the Teamshares Design System. Please check with the design team before using these options:

Size small
Booleans filled, pill

Property	Default	Details
`type`	`'text'`	`'currency' \| 'date' \| 'datetime-local' \| 'email' \| 'number' \| 'password' \| 'search' \| 'tel' \| 'text' \| 'time' \| 'url'` The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults to `text`.
`name`	`''`	`string` The name of the input, submitted as a name/value pair with form data.
`value`	`''`	`string` The current value of the input, submitted as a name/value pair with form data.
`defaultValue`	`''`	`string` The default value of the form control. Primarily used for resetting the form control.
`size`	`'medium'`	`'small' \| 'medium' \| 'large'` The input’s size.
`filled`	`false`	`boolean` Draws a filled input.
`pill`	`false`	`boolean` Draws a pill-style input with rounded edges.
`label`	`''`	`string` The input’s label. If you need to display HTML, use the `label` slot instead.
`labelTooltip` `label-tooltip`	`''`	`string` Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.
`contextNote` `context-note`	`''`	`string` Text that appears above the input, on the right, to add additional context. If you need to display HTML in this text, use the `context-note` slot instead.
`helpText` `help-text`	`''`	`string` The input’s help text. If you need to display HTML, use the `help-text` slot instead.
`clearable`	`false`	`boolean` Adds a clear button when the input is not empty.
`optionalIcon` `optional-icon`	`false`	`boolean` Adds the default optional icon for this input type. Currently only types `email` and `tel` have default optional icons.
`disabled`	`false`	`boolean` Disables the input.
`placeholder`	`''`	`string` Placeholder text to show as a hint when the input is empty.
`readonly`	`false`	`boolean` Makes the input readonly.
`passwordToggle` `password-toggle`	`false`	`boolean` Adds a button to toggle the password’s visibility. Only applies to password types.
`passwordVisible` `password-visible`	`false`	`boolean` Determines whether or not the password is currently visible. Only applies to password input types.
`noSpinButtons` `no-spin-buttons`	`false`	`boolean` Hides the browser’s built-in increment/decrement spin buttons for number inputs.
`form`	`''`	`string` By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.
`required`	`false`	`boolean` Makes the input a required field.
`pattern`	—	`string` A regular expression pattern to validate input against.
`minlength`	—	`number` The minimum length of input that will be considered valid.
`maxlength`	—	`number` The maximum length of input that will be considered valid.
`min`	—	`number \| string` The input’s minimum value. Only applies to date and number input types.
`max`	—	`number \| string` The input’s maximum value. Only applies to date and number input types.
`step`	—	`number \| 'any'` Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is implied, allowing any numeric value. Only applies to date and number input types.
`autocapitalize`	—	`'off' \| 'none' \| 'on' \| 'sentences' \| 'words' \| 'characters'` Controls whether and how text input is automatically capitalized as it is entered by the user.
`autocorrect`	—	`'off' \| 'on'` Indicates whether the browser’s autocorrect feature is on or off.
`autocomplete`	—	`string` Specifies what permission the browser has to provide assistance in filling out form field values. Refer to this page on MDN for available values.
`autofocus`	—	`boolean` Indicates that the input should receive focus on page load.
`enterkeyhint`	—	`'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'` Used to customize the label or icon of the Enter key on virtual keyboards.
`spellcheck`	`true`	`boolean` Enables spell checking on the input.
`inputmode`	—	`'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'` Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual keyboard on supportive devices.
`valueAsDate`	—	— Gets or sets the current value as a `Date` object. Returns `null` if the value can’t be converted. This will use the native `<input type="{{type}}">` implementation and may result in an error.
`valueAsNumber`	—	— Gets or sets the current value as a number. Returns `NaN` if the value can’t be converted.
`validity`	—	— Gets the validity state object
`validationMessage`	—	— Gets the validation message
`updateComplete`		A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Slots

Name	Details
`label`	The input’s label. Alternatively, you can use the `label` attribute.
`label-tooltip`	Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.
`context-note`	Used to add contextual text that is displayed above the input, on the right. Alternatively, you can use the `context-note` attribute.
`prefix`	Used to prepend a presentational icon or similar element to the input.
`suffix`	Used to append a presentational icon or similar element to the input.
`clear-icon`	An icon to use in lieu of the default clear icon.
`show-password-icon`	An icon to use in lieu of the default show password icon.
`hide-password-icon`	An icon to use in lieu of the default hide password icon.
`help-text`	Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.

Learn more about using slots.

Events

Name	Name	Name	React Event	Details
`sl-blur`	`sl-blur`	`sl-blur`	`onSlBlur`	Emitted when the control loses focus.
`sl-change`	`sl-change`	`sl-change`	`onSlChange`	Emitted when an alteration to the control’s value is committed by the user.
`sl-clear`	`sl-clear`	`sl-clear`	`onSlClear`	Emitted when the clear button is activated.
`sl-focus`	`sl-focus`	`sl-focus`	`onSlFocus`	Emitted when the control gains focus.
`sl-input`	`sl-input`	`sl-input`	`onSlInput`	Emitted when the control receives input.
`sl-invalid`	`sl-invalid`	`sl-invalid`	`onSlInvalid`	Emitted when the form control has been checked for validity and its constraints aren’t satisfied.

Learn more about events.

Methods

Name	Details
`focus()`	`options: FocusOptions` Sets focus on the input.
`blur()`	Removes focus from the input.
`select()`	Selects all the text in the input.
`setSelectionRange()`	`selectionStart: number , selectionEnd: number , selectionDirection: 'forward' \| 'backward' \| 'none'` Sets the start and end positions of the text selection (0-based).
`setRangeText()`	`replacement: string , start: number , end: number , selectMode: 'select' \| 'start' \| 'end' \| 'preserve'` Replaces a range of text with a new string.
`showPicker()`	Displays the browser picker for an input element (only works if the browser supports it for the input type).
`stepUp()`	Increments the value of a numeric input type by the value of the step attribute.
`stepDown()`	Decrements the value of a numeric input type by the value of the step attribute.
`checkValidity()`	Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
`getForm()`	Gets the associated form, if one exists.
`reportValidity()`	Checks for validity and shows the browser’s validation message if the control is invalid.
`setCustomValidity()`	`message: string` Sets a custom validation message. Pass an empty string to restore validity.

Learn more about methods.

CSS Parts

Name	Description
`form-control`	The form control that wraps the label, input, and help text.
`form-control-label`	The label’s wrapper.
`form-control-input`	The input’s wrapper.
`form-control-help-text`	The help text’s wrapper.
`base`	The component’s base wrapper.
`input`	The internal `<input>` control.
`prefix`	The container that wraps the prefix.
`clear-button`	The clear button.
`password-toggle-button`	The password toggle button.
`suffix`	The container that wraps the suffix.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<sl-icon>

Examples

Basic Input with Label

Help Text

Label with Tooltip

Label with Context Note

Clearable

Toggle Password

Disabled

Sizes

Pill

Input Types

Prefix & Suffix Icons

Customizing Label Position

Usage

Labels

Help Text

Placeholder Text

Help Text, Label Tooltip, or Context Note?

Testing

With Cypress

Component Props

Slots

Events

Methods

CSS Parts

Dependencies