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>