Input

<sc-input></sc-input>

Inputs collect data from the user.

Preview

<sc-input></sc-input>

Code

Placeholder

Preview

<sc-input placeholder="Enter your name"></sc-input>

Code

Clearable

Preview

<sc-input placeholder="Clearable" clearable></sc-input>

Code

Disabled

Preview

<sc-input placeholder="Disabled" disabled></sc-input>

Code

Sizes

Preview

<sc-input placeholder="Small" size="small"></sc-input>
<sc-input placeholder="Medium" size="medium"></sc-input>
<sc-input placeholder="Large" size="large"></sc-input>

Code

Prefix and Suffix

Preview

<sc-input placeholder="Small" size="small">
    <span slot="prefix">👍🏻</span>
    <span slot="suffix">👍🏻</span>
</sc-input>
<sc-input placeholder="Medium" size="medium">
    <span slot="prefix">👍🏻</span>
    <span slot="suffix">👍🏻</span>
</sc-input>
<sc-input placeholder="Large" size="large">
    <span slot="prefix">👍🏻</span>
    <span slot="suffix">👍🏻</span>
</sc-input>

Code

👍🏻👍🏻
👍🏻👍🏻
👍🏻👍🏻

Labels

Preview

<sc-input label="What is your name"></sc-input>

Code

Help Text

Preview

<sc-input label="What is your name"></sc-input>

Code

Component Codex

Properties

Property	Description	Type	Default
autocomplete	The input's autocomplete attribute.	string
autocorrect	The input's autocorrect attribute.	string
autofocus	The input's autofocus attribute.	boolean
clearable	Adds a clear button when the input is populated.	boolean	false
disabled	Disables the input.	boolean	false
hasFocus	Inputs focus	boolean
help	The input's help text.	string	''
hidden	Hidden	boolean	false
inputmode	The input's inputmode attribute.	"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"
invalid	This will be true when the control is in an invalid state. Validity is determined by props such as `type`, `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.	boolean	false
label	The input's label.	string
max	The input's maximum value.	number | string
maxlength	The maximum length of input that will be considered valid.	number
min	The input's minimum value.	number | string
minlength	The minimum length of input that will be considered valid.	number
name	The input's name attribute.	string
pattern	A pattern to validate input against.	string
pill	Draws a pill-style input with rounded edges.	boolean	false
placeholder	The input's placeholder text.	string
readonly	Makes the input readonly.	boolean	false
required	Makes the input a required field.	boolean	false
showLabel	Should we show the label	boolean	true
size	The input's size.	"large" | "medium" | "small"	'medium'
spellcheck	Enables spell checking on the input.	boolean
squared		boolean
squaredBottom		boolean
squaredLeft		boolean
squaredRight		boolean
squaredTop		boolean
step	The input's step attribute.	number
togglePassword	Adds a password toggle button to password inputs.	boolean	false
type	The input's type.	"email" | "hidden" | "number" | "password" | "search" | "tel" | "text" | "url"	'text'
value	The input's value attribute.	string	''

Events

Event	Description	Type
scBlur	Emitted when the control loses focus.	CustomEvent<void>
scChange	Emitted when the control's value changes.	CustomEvent<void>
scClear	Emitted when the clear button is activated.	CustomEvent<void>
scFocus	Emitted when the control gains focus.	CustomEvent<void>
scInput	Emitted when the control receives input.	CustomEvent<void>

Methods

reportValidity() => Promise<boolean>

setCustomValidity(message: string) => Promise<void>

Sets a custom validation message. If `message` is not empty, the field will be considered invalid.

triggerBlur() => Promise<void>

Removes focus from the input.

triggerFocus(options?: FocusOptions) => Promise<void>

Sets focus on the input.

Shadow Parts

Part	Description
base	The elements base wrapper.
clear-button
form-control	The form control wrapper.
help-text	Help text that describes how to use the input.
input	The html input element.
label	The input label.
prefix	Used to prepend an icon or element to the input.
suffix	Used to prepend an icon or element to the input.

Used By

• sc-address
• sc-compact-address
• sc-coupon-form
• sc-customer-edit
• sc-customer-email
• sc-customer-firstname
• sc-customer-lastname
• sc-customer-name
• sc-license
• sc-login-form
• sc-login-provider
• sc-password
• sc-price-input
• sc-product-item-list
• sc-select
• sc-tax-id-input
• sc-wordpress-user-edit

Uses

• sc-form-control