Text Input

Import the component in the script section of your Svelte file:

import TextInput from 'svve11/TextInput.svelte'
            

Creating a Text Input

To supply the text input with its contents, an options object is passed as a prop to the text input. This object can be created in the script section of the .svelte file or imported in from another location. The options object has 6 properties.

Required Props

• label (string): describes what the text input is requesting from the user
• placeholder (string): sets the text displayed in the text input box before the user inputs anything. This gives the user a hint as to what kind of input is being requested.
• id (string): sets the unique id for the text field
• type (string): sets the the kind of input expected to be submitted by the user.

Optional Props

• inputStyle (string): sets the style attribute for the text input box
• labelStyle (string): sets the style attribute for the label above the text input box

Example Options Object:

const textInputOptions = {
	label: 'Your email here:',
	placeholder: 'jsmith@gmail.com',
	id: 'user-email',
	type: 'email',
	labelStyle: 'font-family:Times New Roman; font-size:20px',
	inputStyle: 'color: blue'
};
              		

Instantiating a text input

<TextInput options={textInputOptions} />
					

Example Text Input without styles:

Example Text Input with styles:

There are a number of other optional attributes available with this component. Each of these attributes has the same function as the HTML attribute with its same name. Please check W3Schools' Input Tag Information or MDN's Input Tag Information webpages to learn more about how these work. By default all attributes of type boolean are set to false.

• max (string)
• min (string)
• maxLength (string)
• size (string)
• step (string)
• autocomplete (booelan)
• disabled (booelan)
• multiple (booelan)
• readonly (booelan)
• required (booelan)