Text Field

An input that enables user to type in text information.

Importing

To use the text field component, first you need to register the component inside the page. You can register the component manually by importing the register function:

Web (Option 1)

import { register } from "@tapsioss/web-components/text-field";

register(); // Now the text field component is ready to use!

Web (Option 2)

import { registerTextField } from "@tapsioss/web-components";

registerTextField(); // Now the text field component is ready to use!

Also you can automatically register the component by importing it with the following approach:

Web

import "@tapsioss/web-components/text-field/element";

TIP

If you want to use all the component in your app, you can call registerAll at the root of your project.

import { registerAll } from "@tapsioss/web-components";

registerAll(); // All the components are now available

In the React package, you can easily add the component using the following code:

React

import { TextField } from "@tapsioss/react-components";

Component Usage

Web

<tapsi-text-field></tapsi-text-field>

React

<TextField />

Properties

Name	Attribute Name	Description	Type	Default Value
type	type	The <input> type to use. The type greatly changes how the text field behaves. Text fields support a limited number of <input> types: - text - email - number - password - search - tel - url See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types for more details on each input type.	| "email" | "number" | "password" | "search" | "tel" | "text" | "url"	"text"
max	max	Defines the greatest value in the range of permitted values. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max	string	""
min	min	Defines the most negative value in the range of permitted values. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min	string	""
pattern	pattern	A regular expression that the text field's value must match to pass constraint validation. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern	string	""
multiple	multiple	Indicates that input accepts multiple email addresses. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple	boolean	false
step	step	Returns or sets the element's step attribute, which works with min and max to limit the increments at which a numeric or date-time value can be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step	string	""
inputMode	inputMode	Hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode	string	""
valueAsNumber	-	The text field's value as a number.	number	-
valueAsDate	-	The text field's value as a Date.	Date | null	-
maxLength	maxlength	The maximum number of characters a user can enter into the text input. Set to -1 for none. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength	number	-1
minLength	minlength	The minimum number of characters a user can enter into the text input. Set to -1 for none. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength	number	-1
placeholder	placeholder	Defines the text displayed in the text input when it has no value. Provides a brief hint to the user as to the expected type of data that should be entered into the control. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder	string	""
readOnly	-	Indicates whether or not a user should be able to edit the text input's value. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly	boolean	false
autocomplete	autocomplete	Describes what, if any, type of autocomplete functionality the input should provide. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete	AutoFill	""
supportingText	supporting-text	Conveys additional information below the text input, such as how it should be used.	string	""
error	error	Gets or sets whether or not the text input is in a visually invalid state. This error state overrides the error state controlled by reportValidity().	boolean	false
errorText	error-text	The error message that replaces supporting text when error is true. If errorText is an empty string, then the supporting text will continue to show. This error message overrides the error message displayed by reportValidity().	string	""
label	label	The label of the text input. - If the hideLabel property is true, the label will be hidden visually but still accessible to screen readers. - Otherwise, a visible label element will be rendered. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label	string	""
hideLabel	hide-label	Whether to hide the label or not.	boolean	false
rounded	rounded	Whether the input is rounded or not.	boolean	false
size	size	The size of the input.	"sm" | "md"	"md"
noActiveBorder	no-active-border	Whether to show the active border around the input or not.	boolean	false
value	value	The current value of the input. It is always a string.	string	""
required	required	Indicates that the user must specify a value for the input before the owning form can be submitted and will render an error state when reportValidity() is invoked when value is empty. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required	boolean	false
labelledBy	labelledby	Identifies the element (or elements) that labels the input. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby	string	""
autofocus	autofocus	Indicates that the element should be focused on page load. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus	boolean	false

Methods

Name	Description	Parameters
stepDown	Decrements the value of a numeric type text field by step or n step number of times. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown	Name: stepDecrement Type: (number): The number of steps to decrement.
stepUp	Increments the value of a numeric type text field by step or n step number of times. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp	Name: stepIncrement Type: (number): The number of steps to increment.
reset	Reset the text field to its default value.

Slots

Name	Value	Description
LEADING_ICON	leading-icon	the trailing slot of the input
TRAILING	trailing	the trailing slot of the input

TIP

The value of slots are available for developer as JavaScript Variables:

Web

// Option 1
import { TextFieldSlots } from "@tapsioss/web-components";

// Option 2
import { Slots } from "@tapsioss/web-components/text-field";

React

// Option 1
import { TextFieldSlots } from "@tapsioss/react-components";

// Option 2
import { Slots } from "@tapsioss/react-components/TextField";

Events

Name	Description	Type	Bubbles	Cancelable
change	Fires when the user modifies the element's value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.	Event	✅	❌
input	Fires when the value of an input element has been changed as a direct result of a user action.	Event	✅	❌