@forter/input

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 values 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.

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