fc-form-field

An element that contained field by different types

Usage

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

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

Examples

<!-- field options -->
<fc-form-field type="
" .options="${['foo','bar']}"></fc-form-field>

<!-- input with warning -->
<fc-form-field type="number" label="foo" warning="Low Amount"></fc-form-field>

<!-- 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 |