@forter/form-field NPM

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: "$", "₪")
`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
`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`