Preview

Usage

<cs-input placeholder="Enter your name"></cs-input>
<cs-input type="password" placeholder="Password"></cs-input>
<cs-input disabled placeholder="Disabled"></cs-input>
<cs-input invalid placeholder="Invalid input"></cs-input>

Properties

aria-labelstring

Adds an aria-label to the native control.

Use this if you don't have a visible label for this control.

aria-requiredboolean default: null

Specifies whether to add aria-required to the native control.

auto-completeboolean | string

Specifies whether to enable a browser's autocomplete functionality for this input. In some cases it might be appropriate to disable autocomplete (for example, for security-sensitive fields). To use it correctly, set the name property.

You can either provide a boolean value to set the property to "on" or "off", or specify a string value for the autocomplete attribute.

auto-focusboolean default: false

Indicates whether the control should be focused as soon as the page loads, which enables the user to start typing without having to manually focus the control. Don't use this option on pages where the control may be scrolled out of the viewport.

clear-aria-labelstring default: ''

Adds an aria-label to the clear button inside the search input.

disable-browser-autocorrectboolean

Specifies whether to disable browser autocorrect and related features. If you set this to true, it disables any native browser capabilities that automatically correct user input, such as autocorrect and autocapitalize. If you don't set it, the behavior follows the default behavior of the user's browser.

disabledboolean

Specifies if the control is disabled, which prevents the user from modifying the value and prevents the value from being included in a form submission. A disabled control can't receive focus.

input-modeInputProps.InputMode default: ''

Adds a hint to the browser about the type of data a user may enter into this field. Some devices may render a different virtual keyboard depending on this value. This value may not be supported by all browsers or devices.

namestring

Specifies the name of the control used in HTML forms.

placeholderstring default: ''

Specifies the placeholder text rendered when the value is an empty string.

read-onlyboolean default: false

Specifies if the control is read-only, which prevents the user from modifying the value but includes it in a form submission. A read-only control can receive focus.

Don't use read-only inputs outside a form.

spellcheckboolean

Specifies the value of the spellcheck attribute on the native control. This value controls the native browser capability to check for spelling/grammar errors. If not set, the browser default behavior is to perform spellchecking. For more details, check the spellcheck MDN article.

Enhanced spellchecking features of your browser and/or operating system may send input values to external parties. Make sure it’s deactivated for fields with sensitive information to prevent inadvertently sending data (such as user passwords) to third parties.

stepInputProps.Step default: null

The step attribute is a number that specifies the granularity that the value must adhere to or the keyword "any". It is valid for the numeric input types, including the date, month, week, time, datetime-local, number and range types.

typeInputProps.Type default: 'text'

Specifies the type of control to render. Inputs with a number type use the native element behavior, which might be slightly different across browsers.

valuestringrequired

Specifies the text entered into the form element.

Events

blurCustomEvent<null>

Called when input focus is removed from the UI control.

changeCustomEvent<InputProps.ChangeDetail>

Called whenever a user changes the input value (by typing or pasting). The event detail contains the current value of the field.

focusCustomEvent<null>

Called when input focus is moved to the UI control.

keyDownCustomEvent<InputProps.KeyDetail>

Called when the underlying native textarea emits a keydown event. The event detail contains the keyCode and information about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).

keyUpCustomEvent<InputProps.KeyDetail>

Called when the underlying native textarea emits a keyup event. The event detail contains the keyCode and information about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).