Input

Inputs are used to collect user data.

Installation

Coming soon..

Examples

Input


                                                        
                                                        
                                                            <co-input id="input1"></co-input>
                                                        
                                                            

Input types


                                                        
                                                        
                                                            <!-- The default value for the input type is 'text' --> 
                                                        <co-input id="input2" type="text"></co-input>
                                                        <co-input id="input3" type="number"></co-input>
                                                        <co-input id="input4" type="email"></co-input>
                                                        <co-input id="input5" type="tel"></co-input>
                                                        <co-input id="input6"t type="search"></co-input>
                                                        <co-input id="input7" type="url"></co-input>
                                                        
                                                            

Label


                                                        
                                                        
                                                            <co-input id="input8" label="First Name"></co-input>
                                                        
                                                            

Label with optional text


                                                        
                                                        
                                                            <co-input id="input9" label="Last Name" optional></co-input>
                                                        
                                                            

Label size varies from md to 8xl


                                                        
                                                        
                                                            <!-- The default label size is 'md' -->
                                                        <co-input id="input10" label="Label Name" label-size="md"></co-input>
                                                        <co-input id="input11" label="Label Name" label-size="lg"></co-input>
                                                        <co-input id="input12" label="Label Name" label-size="xl"></co-input>
                                                        <co-input id="input13" label="Label Name" label-size="2xl"></co-input>
                                                        <co-input id="input14" label="Label Name" label-size="3xl"></co-input>
                                                        <co-input id="input15" label="Label Name" label-size="4xl"></co-input>
                                                        <co-input id="input16" label="Label Name" label-size="5xl"></co-input>
                                                        <co-input id="input17" label="Label Name" label-size="6xl"></co-input>
                                                        <co-input id="input18" label="Label Name" label-size="7xl"></co-input>
                                                        <co-input id="input19" label="Label Name" label-size="8xl"></co-input>
                                                        
                                                            

Helper text


                                                        
                                                        
                                                            <co-input id="input20" helperId="helper1" label="City" helper-text="This is Helper Text"></co-input>
                                                        
                                                            

Validation message


                                                        
                                                        
                                                            <co-input id="input21" validationId="validity1" label="Country" validity-msg="This fiels is required" invalid></co-input>
                                                        
                                                            

Disabled


                                                        
                                                        
                                                            <co-input id="input22" disabled></co-input>
                                                        
                                                            

Readonly


                                                        
                                                        
                                                            <co-input id="input23" readonly></co-input>
                                                        
                                                            

Autofocus


                                                        
                                                        
                                                            <co-input id="input24" autofocus></co-input>
                                                        
                                                            

Autocomplete


                                                        
                                                        
                                                            
                                                        <!-- To turn the autocomplete on for an input -->
                                                        <co-input id="input25" autocomplete="on"></co-input>
                                                        <!-- To turn the autocomplete off for an input -->
                                                        <co-input id="input26" autocomplete="off"></co-input>
                                                        <!-- To assign specific value to autocomplete  -->
                                                        <co-input id="input27" autocomplete="address-line1"></co-input>
                                                        <co-input id="input28" autocomplete="country"></co-input>
                                                        <co-input id="input29" autocomplete="postal-code"></co-input>
                                                        
                                                            

Required


                                                        
                                                        
                                                            <co-input id="input30" required></co-input>
                                                        
                                                            

Spellcheck


                                                        
                                                        
                                                            <co-input id="input31" spellcheck="true"></co-input>
                                                        
                                                            

Value


                                                        
                                                        
                                                            <co-input id="input32" value="John"></co-input>
                                                        
                                                            

Minlength/maxlength


                                                        
                                                        
                                                            <!-- minlength/maxlength attributes will not support for number inputs -->
                                                        <co-input id="input33" minlength="1" maxlength="100"></co-input>
                                                        
                                                            

Min/max


                                                        
                                                        
                                                            <!-- min/max attributes will only supports for number inputs -->
                                                        <co-input id="input34" type="number" min="1" max="1000"></co-input>
                                                        
                                                            

Size


                                                        
                                                        
                                                            <!-- size attribute will not support for number inputs -->
                                                        <co-input id="input35" size="100"></co-input>
                                                        
                                                            

Step


                                                        
                                                        
                                                            <!-- step attribute will only supports for number inputs -->
                                                        <co-input id="input36" type="number" step="5"></co-input>
                                                        
                                                            

Pattern


                                                        
                                                        
                                                            <co-input id="input37" label="pincode" pattern="[0-9]{6}"></co-input>
                                                        
                                                            

Inputmode


                                                        
                                                        
                                                            <co-input id="input38" inputmode="numeric"></co-input>
                                                        
                                                            

Placeholder


                                                        
                                                        
                                                            <co-input id="input39" placeholder="City" label="City"></co-input>
                                                        
                                                            

Using slots


                                                        
                                                        
                                                            <co-input id="input40" helperId="helper2" validationId="validity2" optional invalid label-size="lg">
                                                            <label slot="label"> Label Name </label>
                                                            <p slot="helper-text"> Helper slotstext </p>
                                                            <p slot="validity-msg"> This field is required </p>
                                                        </co-input>
                                                        
                                                            

Using attributes


                                                        
                                                        
                                                            <co-input id="input41" helperId="helper3" validationId="validity3" label="First Name" label-size="lg" optional invalid helper-text="Helper Text" validity-msg="This field is required">
                                                        </co-input>
                                                        
                                                            

Properties

Property

Type

Description

Usage

type

String

The type of the input.

type=

”text”

|“number"

|“email”

| “tel”

| “search”

| “url”

label

String

The input’s label, to describe the purpose of the input field.

label=”Label Name”

label-size

String

The input’s label size

label-size= ”md” | “lg” | “xl” | “2xl” | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl"

optional

Boolean

To display the optional text

optional= true | false

helper-text

String

The input’s helper text, that describes how to use the helper text.

helper-text= ”This is helper text”

validity-msg

String

The input’s validation message

validity-msg= ”This field is required”

invalid

Boolean

Controls the invalid state and visibility of the validity message

invalid= true | false

disabled

Boolean

Controls the disable state of the input

disabled= true | false

required

Boolean

To make the input as required field

required= true | false

readonly

Boolean

To make the input as readonly

readonly= true | false

autofocus

Boolean

Indicates that the input should receive focus on page load

autofocus= true | false

minlength

Number

To specify the minimum number of characters required in an input field (This will not support for number inputs)

minlength=”1”

maxlength

Number

To specify the maximum number of characters required in an input (This will not support for number inputs)

maxlength=”100”

min

Number

To specify the minimum value for an input element(This will only support for number inputs)

min=”1”

max

Number

To specify the maximum value for an input element(This will only support for number inputs)

max=”100”

size

Number

The input box size(This will not support for number inputs)

size=”20”

value

String

The value of the input

value=”John”

spellcheck

Boolean

To verify the spellcheck

spellcheck= true | false

inputmode

String

To change the appearance of the keyboard on a phone or tablet (any device with a virtual keyboard).

inputmode= ”none” | “text” | “decimal” | “numeric” | “tel” | “search” | “email” | “url”

pattern

String

To validate the input using regular expressions

pattern=”[0-9]{6}”

autocomplete

 

It specifies whether the browser can automatically populate previously saved values from the browser or not.

autocomplete= ”on” | “off” | "specific value"

placeholder

 

Placeholder text to show as a hint when the input is empty.

placeholder=”First name”

step

Number

To specify the interval between legal numbers(This will only support s for number inputs)

step=”5”

slot=”label”

-

The input’s label. Alternatively, you can use the label attribute.

-

slot=”helper-text”

-

Input’s helper text. Alternatively you can use helper-text attribute

-

slot=”validity-msg”

-

Input’s validation message. Alternatively you can use validity-msg attribute

-

Slots

Developer can use either attributes mentioned in property table or use slots like below.

Name

Description

Usage

label

Label for the Input

slot=”label”

helper-text

Helper text for the input

<p slot="helper-text”>This is slider helper text</p>

validity-msg

Validation message for the input

<p slot="validity-msg”>This field is required</p>

Dependencies

This component automatically imports the following dependency.


                                                        
                                                        
                                                            <co-icon></co-icon>