<zest-input>

Simple input web-component to be use accross web irrespective of frameworks.

Installation

npm install @zestui/input

Attributes

| Name | Type | Default | Description | ---- | ---- | ------- | ----------- | id | string | '' | Sets the id attribute for the input. Preferred when used inside forms. | name | string | '' | Sets the name attribute for the input. Preferred when used inside forms. | type | string | 'text | Allowed input type values: text, search, tel, url, email, password, date, month, week, time, datetime-local, number, color | label | string | '' | Label to display for the input. | disabled | string | 'false' | When 'true' input is disabled cannot be interacted with. | required | string | 'false' | When 'true' the input field is marked mandatory. | value | string | '' | Sets the value property of the input. Can be used to set default value | placeholder | string | 'Enter value' | Sets the input placeholder. | autofocus | boolean | false | Sets the input autofocus attribute. | pattern | string | '' | Sets the input attribute property for validation. | min | string | '' | Sets the input min attribute for number input. | max | string | '' | Sets the input max attribute for number input. | maxlength | string | '' | Sets the input maxlength attribute. | theme | string | 'light | When 'true', the input will adapt to dark theme. | full-width | string | 'false' | When 'true', the input will take full width of the container. By default the max-width is 300px. | error-msg | string | '' | When error message string is provided, the input will be error themed and error message is displayed. | help-msg | string | '' | When help message string is provided, help message is displayed. | icon | string | 'false' | When 'true', icon will be displayed before the placeholder.

Examples

Default Input

<zest-input></zest-input>

Input with label and value

<zest-input id="name" name="name" label="name" placeholder="Enter your name" value='Jay'></zest-input>

Input with error

<zest-input id="error" name="error" label="error" placeholder="Enter your name" error-msg='Name is required'></zest-input>

Disabled Input

<zest-input disabled='true' type='text' value="Jayabratha" placeholder="Disabled Input"></zest-input>

<zest-input disabled='true' type='text' placeholder="Disabled Input"></zest-input>

Icon Input

<zest-input type='text' icon='true' placeholder="Icon Input">
    <span slot='icon' class='icon'>&hearts;</span>
</zest-input>

Cutomization

<zest-input id="custom-input" name="custom" label="Custom Input" placeholder="Enter your name"></zest-input>

#custom-input {
    --color-primary: #1eba68;
    --border-radius: 30px;
    --label-case: normal;
    --label-spacing: 0;
}

Cutomizable property list

| Name | Default | ---- | ---- |--color-primary | #1eba68; |--color-primary-dark | #1ba75e; |--color-secondary | #f6f6f6; |--color-secondary-dark | #efefef; |--color-secondary-darktheme | rgba(255, 255, 255, 0.3); |--color-secondary-dark-darktheme | rgba(255, 255, 255, 0.6); |--color-error | #dd4421; |--color-error-background | #ffebe6; |--color-placeholder | #737373; |--color-placeholder-disabled | #e0e0e0; |--color-placeholder-darktheme | #e0e0e0; |--color-label | #909090; |--color-black | #2c2c2c; |--color-header-black | #252525; |--color-header-tag | #747373; |--color-white | #ffffff; |--color-border | #edebeb; |--border-radius | 0.5rem; |--border-width | 1px; |--border-width-hover | 3px; |--label-spacing | 0.2rem; |--label-case | uppercase; |--label-font-size | 0.8rem; |--button-font-weight | 500;