npm package: @forter/input
Description: Inputs from Forter Components
Author: Forter Developers
Latest version: 3.14.29

# fc-input

An element for data entry
<!-- Author: Liron Goldenberg <lgoldenberg@forter.com> -->

[![](https://badgen.net/badge/@/forter/blue)](https://components.forter.dev/?path=/docs/controls-input--default-properties) [![](https://badgen.net/badge/build/pass/green)](https://github.com/forter/web-components/actions?query=workflow%3ACD) [![](https://badgen.net/badge/vulnerabilities/0/green)](https://snyk.io/vuln/npm:%40forter%2Finput) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/input/build/index.js?label=gzip%20normal)](https://bundlephobia.com/result?p=@forter/input) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/input/build/index.legacy.js?label=gzip%20legacy)](https://bundlephobia.com/result?p=@forter/input) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/input/build/index.css?label=gzip%20css)](https://bundlephobia.com/result?p=@forter/input)

## Usage

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

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

## Examples

```html
<!-- 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 values<br />Values 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.
<!-- Author: Liron Goldenberg <lgoldenberg@forter.com> -->

[![](https://badgen.net/badge/@/forter/blue)](https://components.forter.dev/?path=/docs/controls-input--default-properties) [![](https://badgen.net/badge/build/pass/green)](https://github.com/forter/web-components/actions?query=workflow%3ACD) [![](https://badgen.net/badge/vulnerabilities/0/green)](https://snyk.io/vuln/npm:%40forter%2Finput) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/input/build/index.js?label=gzip%20normal)](https://bundlephobia.com/result?p=@forter/input) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/input/build/index.legacy.js?label=gzip%20legacy)](https://bundlephobia.com/result?p=@forter/input) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/input/build/index.css?label=gzip%20css)](https://bundlephobia.com/result?p=@forter/input)

## Usage

```html
<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:<br />- `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.<br />- `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`                |