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

Design

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