TextField

The text-field component.

• Import

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

• Tag

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

Properties

Name	Description	Type	Default Value
value	The current value of the input. It is always a string.	string	""
name	The HTML name to use in form submission.	string	""
disabled	Whether or not the element is disabled.	boolean	false
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
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	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	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	Describes what, if any, type of autocomplete functionality the input should provide. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete	string	""
supporting-text	Conveys additional information below the text input, such as how it should be used.	string	""
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
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	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	""
labelledby	Identifies the element (or elements) that labels the input. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby	string	""
size	The size of the input.	"sm" | "md"	"md"
hide-label	Whether to hide the label or not.	boolean	false
rounded	Whether the input is rounded or not.	boolean	false
no-active-border	Whether to show the active border around the input or not.	boolean	false
type	The <input> type to use, defaults to "text". 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.	string	"text"
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	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	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	Indicates that input accepts multiple email addresses. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple	boolean	false
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	""

Slots

Name	Description
leading-icon	the leading icon slot of the text-area
trailing	the trailing slot of the text-area

TIP

You can use slot names as variables:

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

console.log(Slots.LEADING_ICON); // "leading-icon"
console.log(Slots.TRAILING); // "trailing"