@forter/input NPM

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