# fc-form-field

An element that contained field by different types
<!-- Author: oweingart <oweingart@forter.com> -->

## Usage

```html
<script>
   import '@forter/form-field';
</script>

<fc-form-field>
</fc-form-field>
```

## Examples
```html
<!-- field options -->
<fc-form-field type="
" .options="${['foo','bar']}"></fc-form-field>
```
```html
<!-- input with warning -->
<fc-form-field type="number" label="foo" warning="Low Amount"></fc-form-field>
```
```html
<!-- select with warning -->
<fc-form-field type="dropdown" label="foo" warning="Low Amount"></fc-form-field>
```

## Properties

| Property             | Attribute            | Type                                             | Default | Description                                      |
|----------------------|----------------------|--------------------------------------------------|---------|--------------------------------------------------|
| `allowOtherOption`   | `allow-other-option` | `string`                                         |         | The additional "other" value in case of fields with multiple options that allow adding custom value |
| `boldable`           | `boldable`           | `boolean`                                        | false   | If the field is boldable                         |
| `chipsType`          | `chips-type`         | `boolean`                                        |         | Type of the chips (example: "more")              |
| `clearable`          | `clearable`          | `boolean`                                        | false   | If the field is clearable                        |
| `currencysymbol`     | `currencysymbol`     | `string`                                         |         | Currency symbol to show in currency type input field (example: "$", "₪") |
| `dateOptions`        | `dateOptions`        | `any`                                            | {}      | For date input, additional options for the date picker to pass |
| `dirty`              | `dirty`              | `boolean`                                        | false   | If the field is dirty                            |
| `disabled`           | `disabled`           | `boolean`                                        | false   | If the field is disabled                         |
| `extended`           | `extended`           | `boolean`                                        | false   | If fc-input width should be extended             |
| `format`             | `format`             | `string`                                         |         | Date Format. default: `MM/DD/YYYY`, example: `DD MMM YYYY HH:mm` |
| `hideResize`         | `hideResize`         | `boolean`                                        | false   | If hide resize in textarea                       |
| `label`              | `label`              | `string`                                         |         | Label of the field                               |
| `max`                | `max`                | `number`                                         |         | Validate minimum of number value                 |
| `maxlength`          | `maxlength`          | `number`                                         |         | Validate maxlength of string value               |
| `menu`               | `menu`               | `boolean`                                        |         | Whether or not the chips menu is enabled         |
| `min`                | `min`                | `number`                                         |         | Validate minimum of number value                 |
| `minlength`          | `minlength`          | `number`                                         |         | Validate minimum length of string value          |
| `options`            | `options`            | `any[]`                                          |         |                                                  |
| `otherOptionValue`   | `other-option-value` | `string`                                         |         | The additional "other" value in case of fields with multiple options that allow adding custom value |
| `path`               | `path`               | `string`                                         |         | Path of the the field what will be set on the fc-form model (example: "user.firstName", "user.email") |
| `pattern`            | `pattern`            | `any[]`                                          |         | Pattern validation                               |
| `placeholder`        | `placeholder`        | `string`                                         |         | Placeholder in case of input types when no value |
| `readonly`           | `readonly`           | `boolean`                                        | false   | If the field is readonly                         |
| `renderErrorMessage` |                      | `"" \| TemplateResult[]`                         |         |                                                  |
| `required`           | `required`           | `string`                                         |         | Setter for single value field                    |
| `rows`               | `rows`               | `boolean`                                        | "2"     | Rows in textarea                                 |
| `singleSelection`    | `single-selection`   | `boolean`                                        | false   | If multi field allow choosing only single value  |
| `type`               | `type`               | `"number" \| "text" \| "tags" \| "dropdown" \| "date" \| "button-group" \| "currency" \| "select" \| "textarea" \| "chips" \| "segmented-control" \| "radio-group"` | "text"  | Type of the field - can be existing types such as: text, number, tags, dropdown or name of the type in the 'custom-renderers' object passed to fc-form. |
| `valid`              | `valid`              | `boolean`                                        | true    | Internal Observables                             |
| `validations`        | `validations`        | `any[]`                                          |         | List of the validation name to run when value is changed |
| `value`              | `value`              | `string`                                         |         | Setter for single value field                    |
| `values`             | `values`             | `any[]`                                          |         | Setter for multi values field                    |
| `warning`            | `warning`            | `"" \| TemplateResult`                           |         |                                                  |

## Events

| Event           |
|-----------------|
| `field-removed` |

## CSS Custom Properties

| Property                         | Description                     |
|----------------------------------|---------------------------------|
| `--fc-form-field-disabled-color` | disabled color. example: `gray` |