Input

The ty-input component serves as a flexible element for gathering user input. It is designed to handle a variety of scenarios from simple text inputs to more complex fields like emails, dates, and numbers.

Usage

To use the ty-input, you can specify the desired type, placeholder, label, and other attributes in your HTML code.

Live Editor

<ty-input type="text" placeholder="Enter text" label="Name"></ty-input>

Result

Loading...

Leading and Trailing Icons

You can add icons or other elements before or after the input field by using the named slots leading-icon and trailing-icon.

🔒👁️

HTML

<ty-input>
  <span slot="leading-icon">🔒</span>
  <span slot="trailing-icon">👁️</span>
</ty-input>

API

Properties

The ty-input component accepts the following properties:

Name	Description	Type	Default
label	The label for the input element.	string	''
value	The current value of the input element.	string	''
type	Specifies the type of the input element.	'text', 'tel', 'email', 'password', 'number'	'text'
placeholder	Placeholder text to display when the input is empty.	string	''
invalid	Indicates whether the input element contains invalid data.	boolean	false
readonly	Specifies whether the input element is read-only.	boolean	false
disabled	Specifies whether the input element is disabled.	boolean	false
size	Size	'sm', 'md'	'md'

Events

Name	Description	Detail
ty-change	Fires when the value of the input changes.	{ value: string }