fc-input

An element for data entry

Usage

<script>
   import '@forter/input';
</script>

<fc-input name="input"></fc-input>

Examples

<!-- prefix -->
   <fc-input>
     <fc-icon slot="prefix" icon="search"></fc-icon>
   </fc-input>

<!-- suffix -->
   <fc-input>
     <fc-icon slot="suffix" icon="close"></fc-icon>
   </fc-input>

<!-- prefix and suffix -->
   <fc-input>
     <fc-icon slot="prefix" icon="search"></fc-icon>
     <fc-icon slot="suffix" icon="close"></fc-icon>
   </fc-input>

<!-- number and max -->
   <fc-input type="number" step="any" max="10">
   </fc-input>

<!-- tel icon -->
   <fc-input type="tel" icon>
   </fc-input>

<!-- password icon -->
   <fc-input type="password" icon>
   </fc-input>

<!-- number icon -->
   <fc-input type="number" step="any" icon>
   </fc-input>

<!-- email icon -->
   <fc-input type="email" icon>
   </fc-input>

<!-- file icon -->
   <fc-input type="file" icon>
   </fc-input>

<!-- search icon -->
   <fc-input type="search" icon>
   </fc-input>

<!-- valueList icon -->
   <fc-input type="valueList" icon>
   </fc-input>

Properties

| Property | Attribute | Type | Default | Description | |----------------|----------------|--------------------------------------------------|-----------------|--------------------------------------------------| | disabled | disabled | boolean | false | Whether the input is disabled | | flat | flat | boolean | false | Whether the input had no depth or border | | icon | icon | boolean | false | Whether to display the type icon at the prefix | | invalid | invalid | boolean | false | Whether the input is invalid | | label | label | string | "Enter text..." | Label for the input. example: I just wrote something! | | loading | loading | boolean | false | If the button is loading | | max | max | string \| number | | max value for the input. example: 10 | | min | min | string \| number | | min value for the input. example: 0 | | name | name | string | | | | novalidation | novalidation | boolean | false | Set to true when you wish to control input validation state from outside the component | | pattern | pattern | string | | HTML5 pattern for the string | | readonly | readonly | boolean | false | Whether the input is readonly | | required | required | boolean | false | If the input is required | | size | | "small" \| "medium" \| "large" | | Pre-Defined size | | type | type | "color" \| "email" \| "number" \| "password" \| "search" \| "tel" \| "url" \| "date" \| "file" \| "time" \| "upload" \| "valueList" | "text" | The input's type | | valid | valid | boolean | false | Whether the input is valid | | value | | string | "" | Input's value. example: Assaf | | values | values | any[] | | When type is value list, those are the default valuesValues represents as array of objects: {id: 1, label: 'first'} | | warning | warning | string | | |

Events

| Event | Description | |----------|---------------------------------| | change | | | input | fired when the input is changed |

CSS Custom Properties

| Property | Description | |--------------------------------|--------------------------------------------------| | --fc-input-background-color | inputs background-color, default: white | | --fc-input-border-radius | example: 2px | | --fc-input-cursor | default: text. example: pointer | | --fc-input-focus-border | example: inset 0 0 0 4px rgba(255, 0, 0, 0.21) | | --fc-input-font | the font, default: 13px 400. example: var(--fc-font-20px-600) | | --fc-input-font-color | input's font color, default: black | | --fc-input-height | inputs height, default: 33px | | --fc-input-placeholder-color | input's placeholder color, default: black | | --fc-input-prefix-height | default: 20px | | --fc-input-shadow | default: 0 2px 6px 2px var(--grey-3, #dee2e6) | | --fc-input-suffix-height | default: 20px | | --fc-input-width | default: 203px. example: 500px |

fc-textarea

An element for data entry for longer text.

Usage

<script>
   import '@forter/input';
</script>

<fc-textarea></fc-textarea>

Properties

| Property | Attribute | Type | Default | Description | |--------------|--------------|----------------------------------|-----------------|--------------------------------------------------| | disabled | disabled | boolean | false | | | flat | flat | boolean | false | Whether the input had no depth or border | | hideResize | hideResize | "" \| "resize: none" | | | | invalid | invalid | boolean | false | Whether the input is invalid | | label | label | string | "Enter text..." | Label for the input | | maxlength | maxlength | string | | Maximum text length | | minlength | minlength | string | | Minimum text length | | name | name | string | | | | readonly | readonly | boolean | false | If the input is readonly | | required | required | boolean | false | If the input is required | | rows | rows | string | "10" | Number of rows for the textarea | | spellcheck | spellcheck | "true" \| "default" \| "false" | "default" | Specifies whether the <textarea> is subject to spell checking by the underlying browser/OS. | | valid | valid | boolean | false | Whether the input is valid | | value | | string | "" | Input's value | | wrap | wrap | "hard" \| "soft" | "soft" | Indicates how the control wraps text. Possible values are:- hard: The browser automatically inserts line breaks (CR+LF) so that each line has no more than the width of the control; the cols attribute must also be specified for this to take effect.- soft: The browser ensures that all line breaks in the value consist of a CR+LF pair, but does not insert any additional line breaks. |

Events

| Event | Description | |----------|--------------------------------------------------| | change | when typing input method: onInput example: { "target": { "invalid": true, "value": "text" } } |

CSS Custom Properties

| Property | Description | |-----------------------|--------------------------------------------------| | --fc-textarea-font | the font, default: 13px 400. example: var(--fc-font-20px-600) | | --fc-textarea-width | default: 100%. example: 200px |