Input (extended)

Text-based input fields with added functionality

Demo

API

Tag

Name	Description
`<s-input-extended>`	Custom Element, no content

Attributes

Name	Value	Description
`type`	`search` `search-live`	Sets the expected value type.
`inputid`	string	Sets the native input's `id`.
`value`	string	Sets the input's value.
`aiassisted`	Boolean attribute	Displays the AI-assisted icon.
`autofocus`	Boolean attribute	Automatically sets focus on the input.
`placeholder`	string	Sets the input's placeholder text.
`disabled`	Boolean attribute	Disables the input, preventing user interaction. The input value is not submitted with the form. See readonly vs disabled guideline.
`readonly`	Boolean attribute	Makes the input read-only, preventing user editing while still allowing the value to be submitted with the form. See readonly vs disabled guideline.
`i18n`	string	A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Properties

Name	Value	Description
`type`	`search` `search-live`	Sets the expected value type.
`inputId`	string	Sets the native input's `id`.
`value`	string	Sets the input's value.
`aiAssisted`	boolean	Displays the AI-assisted icon.
`autofocus`	Boolean attribute	Automatically sets focus on the input.
`placeholder`	string	Sets the input's placeholder text.
`disabled`	boolean	Disables the input, preventing user interaction. The input value is not submitted with the form. See readonly vs disabled guideline.
`readonly`	boolean	Makes the input read-only, preventing user editing while still allowing the value to be submitted with the form. See readonly vs disabled guideline.
`i18n`	object	A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Classes

Name	Description
`success`	Applies success styling and shows `input-msg`
`warning`	Applies warn styling and shows `input-msg`
`error`	Applies error styling and shows `input-msg`

Methods

Name	Description
`getValue()`	This method returns a Promise that resolves to the input's value

Events

Name	Detail	Description
`s-clear`	The `inputId` is available on `e.detail`.	Fired after the clear button is pressed.
`s-input`	The `inputId` and `value` are available on `e.detail`.	Fired every time the value of the `<input>` is changed.
`s-search`	The `inputId` and search input `value` are available on `e.detail`. This event is only emitted by `<s-input type="search">`.	Fired after the search input is submitted.
`s-keyup`	The `inputId`, `event`, and `value` are available on `e.detail`.	Fired every time a key is pressed in the focused `<input>`.

Demo

API

Tag

Name
`<SInputExtended>`

Props

Name	Value	Description
`type`	`search` `search-live`	Sets the expected value type.
`inputId`	string	Sets the native input's `id`.
`value`	string	Sets the input's value.
`autofocus`	Boolean	Automatically sets focus on the input.
`placeholder`	string	Sets the input's placeholder text.
`disabled`	boolean	Disables the input, preventing user interaction. The input value is not submitted with the form. See readonly vs disabled guideline.
`readonly`	boolean	Makes the input read-only, preventing user editing while still allowing the value to be submitted with the form. See readonly vs disabled guideline.
`aiAssisted`	boolean	Displays the AI-assisted icon.
`onS-search`	function	Handles the `s-search` event emitted when the search input is submitted. The `inputId` and search input `value` are available on `e.detail`. The `s-search` event is only emitted by `<s-input type="search">`.
`onS-clear`	function	Handles the `s-clear` event emitted when the clear button is clicked. The `inputId` is available on `e.detail`.
`onS-input`	function	Handles the `s-input` event, which is fired every time the value of the `<input>` is changed. The `inputId` and `value` are available on `e.detail`.
`onS-keyup`	Function	Handles the `s-keyup` event, which is fired every time a key is pressed in the focused `<input>`. The `inputId`, `event`, and `value` are available on `e.detail`.
`i18n`	object	A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Methods

Name	Description
`getValue()`	This method returns a Promise that resolves to the input's value

React implementation notes

Using refs to access input-extended value

In order to get the current value of the SInputExtended, you must create a ref, assign it to the SInputExtended, and then call getValue() on ref.current. The getValue method returns a promise which resolves to the input's value.

    
    const inputRef = React.createRef(); 
    
    function returnValue() {
      inputtRef.current.getValue().then((value) => console.log(value));
    }
    
    return (
      <SInputExtended ref={inputRef} />
    )

Skylab React links

General information about using our React package

Typescript

Exported types

// s-search event's e.detail export type SSearchData = { inputId: string; value: string; }; // s-clear event's e.detail export type SClearData = { inputId: string; }; // s-keyup event's e.detail export type SKeyUpData = { inputId: string; event: KeyboardEvent; value: string; };

i18n Strings

ID	Description	Default value
`"inputExtended.ariaLabel.search"`	The aria-label used for the input.	search
`"inputExtended.ariaLabel.clear"`	The aria-label used for the clear input button.	clear input
`"inputExtended.placeholder"`	The placeholder text displayed in the input.	Search

Guidelines

Accessibility

Use inputid="{{input-label}}" and for="{{input-label}}" in inputs and labels so screen readers will properly associate them with each other. If there is no visible label, you must add an aria-label to the <s-input-extended>.

Ensure input messages, when they are displayed, have an id that is set to the same value as the associated input's aria-describedby attribute.

Input messages

The <div> with class input-msg will only display when the preceding input has a class of success, warning, or error. The text content must contain the leading <s-icon> indicated in the code sample above. Be sure to include aria-hidden="true" on the <s-icon> element to ensure compatibility with screen readers.

Readonly vs Disabled

Use readonly when you want to display a value that users should see but not edit. The value will be submitted with the form. Use disabled when you want to prevent user interaction entirely. The value will not be submitted with the form.

In some cases, you may need both attributes. For example, when an input should appear disabled but its value must still be submitted, use both readonly and disabled together. The visual styling will match the disabled state, but the value will be included in form submissions.

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com